Let’s take a screenshot first.
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:
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:
Latest Products
Notebook
< /div>
Digital Video
Accessories
Office Printing
div>
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 of this Website
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
Latest Articles by Author
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31