Home > Article > Web Front-end > Javascript moves the mouse up and the slider follows the effect code sharing_javascript skills
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 $$(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;i
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;j
elem.onmousemove=function(){
//Get the parent container of the parent container of the current object
var baseElem=this. parentElement.parentElement;
var baseIndex=indexOf(obj,baseElem) 1;
//Get the coordinates of the current object
var left = this.offsetLeft;
//Get Corresponding slider object
var slider=$$('products-triangle-' baseIndex);
//Change the coordinates of the slider
slider.style.left = left "px";
//Change the color of the current object and other objects
this.style.color = "red";
//Get all elements under the current parent container
var notes=this.parentElement.getElementsByClassName ('products-items-title');
for(var k=0;k
notes[k]. style.color="#666";
}
};
}
}
catch(e){
alert(e);
}
};
}
html code:
上面的html是部分,可以用el表达式循环下,多搞几个。。。
一个上午才做好。。。