Javaｓｃｒｉｐｔ鼠标移动滑块以执行效果代码共享。

首先截图。



当鼠标移动到相应的分类时，较低的红色三角形自动跟随并缓慢跟随。
不管多少。
Javaｓｃｒｉｐｔ代码：

复制代码代码如下所示：
功能changecoord（ID，左）{
$（ID）。style.left =左；
}

函数（id）{ $
返回document.getelementbyid（ID）；
}

函数（id）{
返回document.getelementsbyclassname（ID）{ 0 }；
}

功能指标（哈利，obj）{
对于（var i = 0；i < arry.length；i++）{
如果（obj = =序列{我}）{
还我；
}
}；
}

在window.onload =函数（）{
对于页面上的所有滑动条/注册事件
产品盒中心父容器对象

var obj = document.getelementsbyclassname（'products-box-center）；
对于（var i = 0；i < obj.length；i++）{
尝试{
VAR方法= obj {我}。getelementsbyclassname { 0 }（'products-box-center-title '）； / /拿冠军
VaR elems = base.getelementsbyclassname（'products-items-title）；
对于（var j = 0；J < elems.length；j++）{
var elem = elems {，}；
元素。移动鼠标=函数（）{
获取当前对象的父/父容器
无功baseelem = this.parentelement.parentelement；
VaR的BaseIndex =指标（obj，baseelem）+ 1；

获取当前对象坐标
左= this.offsetleft VaR；

获取相应的对象滑块
VaR滑块= $（+ 'products-triangle BaseIndex）；

改变滑块坐标
slider.style.left =左+PX；
当前对象和其他对象/颜色的更改
this.style.color =红色；
获取下面的当前父容器的所有元素
VaR的笔记= this.parentelement.getelementsbyclassname（'products-items-title）；
对于（var k = 0；K＜notes.length；K+）{
如果（这个）！=注释{ }）
注{ k }。风格。颜色=# 666 ；
}

}；
}

}
catch（e）{
警报（e）；
}
}；

}


HTML代码：

复制代码代码如下所示：


最新商品
笔记本
数字音频
部分
办公打印












LG ips237l-bn 23英寸IPS显示屏



1299美元












上面的HTML是一部分，可以在EL表达式中循环使用，还有一些。
只有一个上午。