鼠标移动到对应的分类，下面的红色小三角形就会自动跟随，缓慢的跟随。
不管有多少个都可以。
javascript code:
社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > Javascript 鼠标移动上去小三角形滑块缓慢跟随效果_javascript技巧

Javascript 鼠标移动上去小三角形滑块缓慢跟随效果_javascript技巧

WBOY
发布： 2016-05-16 17:35:17
原创
1660 人浏览过

先来一张截图。
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果_javascript技巧 
鼠标移动到对应的分类，下面的红色小三角形就会自动跟随，缓慢的跟随。
不管有多少个都可以。
javascript code:

复制代码 代码如下:

function changeCoord(id, left) {
$$(id).style.left = left;
}
function $$(id) {
return document.getElementById(id);
}
function $$$(id) {
return document.getElementsByClassName(id)[0];
}
function indexOf(arry, obj) {
for (var i = 0; i if (obj == arry[i]) {
return i;
}
};
}
window.onload = function() {
//给页面上所有的滑块注册事件
//products-box-center 父容器对象

var obj = document.getElementsByClassName('products-box-center');
for(var i=0;itry{
var base=obj[i].getElementsByClassName('products-box-center-title')[0]; //取得每一项标题
var elems=base.getElementsByClassName('products-items-title');
for(var j=0;jvar elem=elems[j];
elem.onmousemove=function(){
//获得当前对象的父容器的父容器
var baseElem=this.parentElement.parentElement;
var baseIndex=indexOf(obj,baseElem)+1;

//获得当前对象的坐标
var left = this.offsetLeft;

//获得对应的滑块对象
var slider=$$('products-triangle-'+baseIndex);

//改变滑块的坐标
slider.style.left = left + "px";
//改变当前对象和其他对象的颜色
this.style.color = "red";
//获取当前父容器下面的所有元素
var notes=this.parentElement.getElementsByClassName('products-items-title');
for(var k=0;kif(this!=notes[k])
notes[k].style.color="#666";
}

};
}

}
catch(e){
alert(e);
}
};
}

html code:
复制代码 代码如下:



最新商品


笔记本


数码影音


配件


办公打印
















上面的html是部分，可以用el表达式循环下，多搞几个。。。
一个上午才做好。
相关标签：
鼠标移动
来源：php.cn
上一篇：基于jQuery.Validate验证库知识点的详解_jquery 下一篇：jquery ajax同步异步的执行最终解决方案_jquery
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
通过添加 Width 属性将内容向左移动 我已经为主体提供了边距。主要{左边缘：200px;右边距：200px；文本对齐：居中}由于我想以两行而不是一行显示文本，因此我在样式中添加了width属性。.p{字体大小：12px...
来自于 2024-04-06 22:01:35
0
3
816
在移动视图中，当用户点击链接时，如何关闭此导航栏？ 当用户点击链接浏览网站时，导航栏没有关闭？我曾尝试向每个链接添加单击事件侦听器以关闭导航栏，但它不起作用！此外，处于活动位置（即X）的hamberberger菜单图标也没有很好地对...
来自于 2024-04-06 19:23:03
0
1
411
仅 CSS 方法可在单击时动态修改图像 src，无需使用 JavaScript 我需要仅使用css更改鼠标单击时图像的src喜欢img:active{}
来自于 2024-04-06 19:25:49
0
1
505
CSS 样式未应用于网站 我正在使用Bootstrap5制作网站，但index.css属性未应用于index.html。当我将鼠标悬停在服务卡上时，背景应该会发生变化，从而产生过渡效果。应该是从这个到这个。...
来自于 2024-04-06 17:12:23
0
1
336
导航栏上的CSS底部边框 我有一个导航栏，当悬停列表中的任何项目时，我在底部添加了一条红线，但我想将该红线移到标题下方（例如“服务”），知道如何实现此目的？我在codepen中添加了一个小示例，以便您可以轻...
来自于 2024-04-06 15:04:41
0
2
347
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板