Home >Web Front-end >JS Tutorial >Javascript moves the mouse up and the small triangle slider slowly follows the effect_javascript skills

Javascript moves the mouse up and the small triangle slider slowly follows the effect_javascript skills

WBOYOriginal: 2016-05-16 17:35:171693browse

Let’s take a screenshot first.
Javascript moves the mouse up and the small triangle slider slowly follows the effect_javascript skills
Move the mouse to the corresponding category, and the small red triangle below will automatically follow, slowly.
It doesn’t matter how many there are.
javascript code:

Copy 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 sliders on the page
//products-box-center parent container object

var obj = document.getElementsByClassName('products-box-center'); 
for(var i=0;itry{ 
var base=obj[i].getElementsByClassName('products-box-center-title')[0]; //Get the title of each item 
var elems=base.getElementsByClassName('products-items-title'); 
for(var j=0;jvar elem =elems[j]; 
elem.onmousemove=function(){ 
//Get the parent container of the current object’s parent container
var baseElem=this.parentElement.parentElement; 
var baseIndex=indexOf (obj,baseElem) 1; 

//Get 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 current object and other objects Color
this.style.color = "red"; 
//Get all elements under the current parent container
var notes=this.parentElement.getElementsByClassName('products-items-title'); 
for(var k=0;kif(this!=notes[k]) 
notes[k].style.color="#666"; 
} 

}; 
} 

} 
catch(e){ 
alert(e); 
} 
}; 
} 

html code:

Copy code The code is as follows:

Latest Products

Notebook

< /div>

Digital Video

Accessories

Office Printing

< img src="img/pc.jpg"/>

LG IPS237L-BN 23-inch IPS monitor

￥1299.00

The above html is part of it. You can use el expression to loop through it and create more. . .
It took one morning to make.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of knowledge points based on jQuery.Validate verification library_jqueryNext article：Detailed explanation of knowledge points based on jQuery.Validate verification library_jquery

See more