Javascript Mouse Move up slider follow effect code share _javascript Tips

Let's take a screenshot first.

The mouse moves to the corresponding classification, the following red small triangle will automatically follow, slow to follow.
No matter how many are available.
JavaScript code:

Copy Code code as follows:

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 () {
Register events for all sliders on the page
Products-box-center Parent Container Object

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]; Get each title
var elems=base.getelementsbyclassname (' Products-items-title ');
for (Var j=0;j<elems.length;j++) {
var elem=elems[j];
Elem.onmousemove=function () {
Gets the parent container of the current object's parent container
var baseelem=this.parentelement.parentelement;
var baseindex=indexof (Obj,baseelem) +1;

Gets the coordinates of the current object
var left = This.offsetleft;

Get the corresponding Slider object
var slider=$$ (' products-triangle-' +baseindex);

Change the coordinates of the slider
Slider.style.left = left + "px";
Change the color of the current object and other objects
This.style.color = "Red";
Gets all the elements under the current parent container
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:

Copy Code code as follows:

<div class= "Products-box-center" >
<div class= "Products-box-center-title" >
<div class= "Products-items-title products-focus-text" ><div class= "Products-items-title" ><div class= "products-items-title" ><div class= "Products-items-title" ><div class= "Products-items-title" ><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= "ten" >
<li>
<a href= "#" ></a>
<div class= "P-name" >
<a href= "#" &GT;LG ips237l-bn 23-inch IPS monitor </a>
</div>

<div class= "P-price" >
<span>￥1299.00</span>
</div>

</li>
</c:forEach>
</ul>
</div>

</div>

</div>

The above HTML is a part, you can use the El expression loop, a few more ...
Only a morning to do ...