管理资源吧首页>>>教程>>>编程>>>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 < arry.length; i++) {

　　if (obj == arry[i]) {

　　return i;

　　}

　　};

　　}

　　window.onload = function() {

　　//给页面上所有的滑块注册事件

　　//products-box-center 父容器对象

　　var obj = document.getElementsByClassName('products-box-center');

　　for(var i=0;i<obj.length;i++){

　　try{

　　var base=obj[i].getElementsByClassName('products-box-center-title')[0]; //取得每一项标题

　　var elems=base.getElementsByClassName('products-items-title');

　　for(var j=0;j<elems.length;j++){

　　var 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;k<notes.length;k++){

　　if(this!=notes[k])

　　notes[k].style.color="#666";

　　}

　　};

　　}

　　catch(e){

　　alert(e);

　　}

　　};

　　}

　　html code:

复制代码代码如下:

　　</div>

　　<ul>

　　<c:forEach begin="1" end="10">

　　<li>

　　<a href="#">LG IPS237L-BN 23英寸IPS显示器</a>

　　</div>

　　</div>

　　</li>

　　</c:forEach>

　　</ul>

　　</div>

　　上面的html是部分，可以用el表达式循环下，多搞几个。。。

　　一个上午才做好。。。

教程首页更多教程

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

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