鼠标移动到对应的分类,下面的红色小三角形就会自动跟随,缓慢的跟随。
不管有多少个都可以。
javascript code:

Home  >  Article  >  Web Front-end  >  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

WBOY
WBOYOriginal
2016-05-16 17:35:171653browse

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




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