Javascript move the mouse up to the slider to follow the effect

First. Move the mouse to the corresponding category, and the red triangle below will automatically follow, slowly following. No matter how many. Javascriptcode: [javascript] functionchangeCoord (id, left) {$ $ (id). style. leftleft;} fu... Syntax

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 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 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 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 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 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 If (this! = Notes [k])
Notes [k]. style. color = "#666 ";
}

};
}

}
Catch (e ){
Alert (e );
}
};

} Html code:

[Html]
 

Latest Product
Notebook
Digital audio and video
Accessories
Office Printing
 

•  
  
  
  LG IPS237L-BN 23 inch IPS display
  
  
  
  ￥1299.00
  
  
  
 
 

 

 

Latest Product
Notebook
Digital audio and video
Accessories
Office Printing

• 
  
  
  LG IPS237L-BN 23 inch IPS display
  
  
  
  ￥1299.00
  
  
  

The above html is part. You can use the el expression to loop and try more...

It takes only one morning to complete...