First.
Move the mouse to the corresponding category, and the red triangle below will automatically follow, slowly following.
No matter how many.
Javascript code:
[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 (){
// Register events for all the slide 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]; // obtain the title of each item
Var elems = base. getElementsByClassName ('products-items-title ');
For (var j = 0; j <elems. length; j ++ ){
Var elem = elems [j];
Elem. onmousemove = function (){
// Obtain the parent container of the current object
Var baseElem = this. parentElement. parentElement;
Var baseIndex = indexOf (obj, baseElem) + 1;
// Obtain the coordinates of the current object
Var left = this. offsetLeft;
// Obtain the corresponding slider object
Var slider =$ $ ('products-triangle-'+ baseIndex );
// Change the coordinate of the slider
Slider. style. left = left + "px ";
// Change the color of the current object and other objects
This. style. color = "red ";
// Obtain all 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 );
}
};
}
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 the slide 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]; // obtain the title of each item
Var elems = base. getElementsByClassName ('products-items-title ');
For (var j = 0; j <elems. length; j ++ ){
Var elem = elems [j];
Elem. onmousemove = function (){
// Obtain the parent container of the current object
Var baseElem = this. parentElement. parentElement;
Var baseIndex = indexOf (obj, baseElem) + 1;
// Obtain the coordinates of the current object
Var left = this. offsetLeft;
// Obtain the corresponding slider object
Var slider =$ $ ('products-triangle-'+ baseIndex );
// Change the coordinate of the slider
Slider. style. left = left + "px ";
// Change the color of the current object and other objects
This. style. color = "red ";
// Obtain all 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:
[Html]
<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 = "10">
<Li>
<A href = "#"> </a>
<Div class = "p-name">
<A href = "#"> LG IPS237L-BN 23 inch IPS display </a>
</Div>
<Div class = "p-price">
<Span> ¥1299.00 </span>
</Div>
</Li>
</C: forEach>
</Ul>
</Div>
</Div>
</Div>
<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 = "10">
<Li>
<A href = "#"> </a>
<Div class = "p-name">
<A href = "#"> LG IPS237L-BN 23 inch IPS display </a>
</Div>
<Div class = "p-price">
<Span> ¥1299.00 </span>
</Div>
</Li>
</C: forEach>
</Ul>
</Div>
</Div>
</Div>
The above html is part. You can use the el expression to loop and try more...
It takes only one morning to complete...