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

代码如下:

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);
}
};
}

代码如下:

最新商品

笔记本

数码影音

配件

办公打印

• 
  
  

  
  LG IPS237L-BN 23英寸IPS显示器
  

  
  
  

  
  ￥1299.00