JavaScript实现鼠标悬停滑块跟随效果

首先展示效果截图。

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 < 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结构代码如下：

<div class="products-box-center">
<div class="products-box-center-title">
<div class="products-items-title products-focus-text"><h3>最新商品</h3></div>
<div class="products-items-title"><h3>笔记本</h3></div>
<div class="products-items-title"><h3>数码影音</h3></div>
<div class="products-items-title"><h3>配件</h3></div>
<div class="products-items-title"><h3>办公打印</h3></div>
<div class="products-bottom-triangle" id="products-triangle-${index.count}"><b class="triangle"></b></div>
</div>
<div class="products-box-panel">
<div class="products-item">
<ul>
<c:forEach begin="1" end="10">
<li>
<a href="#"><img src="img/pc.jpg"/></a>
<div class="p-name">
<a href="#">LG IPS237L-BN 23英寸IPS显示器</a>
</div>
<div class="p-price">
<span>￥1299.00</span>
</div>
</li>
</c:forEach>
</ul>
</div>
</div>
</div>

上述HTML为部分结构，实际应用中可通过EL表达式进行循环渲染，生成多个分类模块。该功能耗时一个上午完成。