Javascript move the slider to follow the effect code sharing _ javascript tips-js tutorial

This article mainly introduces the Javascript code for moving the slider to follow the effect. If you need it, you can refer to it first.

Move the mouse to the corresponding category, and the red triangle below will automatically follow, slowly following.
No matter how many.
Javascript code:

The Code is 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 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:

The Code is as follows:

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...