Javascript鼠标移动上去滑块跟随效果代码分享

先来一张截图

鼠标移动到对应的分类，下面的红色小三角形就会自动跟随，缓慢的跟随。不管有多少个都可以java描述语言代码：复制代码代码如下：function changeCoord(id，左侧){ $ $(id)。风格。左=左；}函数$ $(id){返回文档。getelementbyid(id)；}函数$ $ $(id){返回文档。getelementsbyclassname(id)[0]；}函数indexOf(arry，obj){ for(var I=0；长度；I){ if(obj==arry[I]){ return I；}};}window.onload=function() {//给页面上所有的滑块注册事件//产品-盒子-中心父容器对象var obj=文档。getelementsbyclassname('产品-盒子-中心');for(var I=0；iobj . LengiI){ 0尝试{var base=obj[i].getElementsByClassName(' products-box-center-title ')[0]；//取得每一项标题var elems=base。getelementsbyclassname('产品-项目-标题')；for(var j=0；jelems . lendej){ var elem=elems[j]；elem.onmousemove=function(){//获得当前对象的父容器的父容器var baselem=this。父元素。父元素；var baseIndex=indexOf(obj，baselem)1；//获得当前对象的坐标var left=this.offsetLeft//获得对应的滑块对象var slider=$ $(' products-triangle-' base index)；//改变滑块的坐标滑块。风格。left=left ' px//改变当前对象和其他对象的颜色这个。风格。颜色='红色'；//获取当前父容器下面的所有元素var notes=这个。parentelement。getelementsbyclassname('产品-项目-标题')；for(var k=0；节长；k ){if(这个！=notes[k])notes[k]。风格。color=' # 666}};} } catch(e){ alert(e)；}};}html代码：复制代码代码如下H3最新商品/h3/divdiv class='产品-项目-标题h3笔记本/h3/divdiv class='产品-项目-标题h3数码影音/h3/divdiv class='产品-项目-标题h3配件/h3/divdiv class='产品-项目-标题h3办公打印/H3/div div class=' products-bottom-triangle ' id=' products-triangle-$ { index。count } ' b class=' triangle '/div/div class=' products-box-panel ' div class=' products-item ' ulc : foreach begin=' 1 ' end=' 10 ' lia href=' # ' img src=' http 3360 img/PC。jpg '/adiv class=' p-name ' a href=' # ' LG IPS 237 l '英寸英寸秒每秒英寸数显示器/a/div class=' p-price ' span $上面的超文本标记语言是部分，可以用埃尔表达式循环下，多搞几个。一个上午才做好。