Home  >  Article  >  Web Front-end  >  Javascript moves the mouse up and the slider follows the effect code sharing_javascript skills

Javascript moves the mouse up and the slider follows the effect code sharing_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:12:451424browse

Let’s take a screenshot first.

Javascript moves the mouse up and the slider follows the effect code sharing_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;i try{
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 var elem=elems[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 if(this!=notes[k])
notes[k]. style.color="#666";
}

};
}

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

}

html code:

Copy code The code is as follows:

 

    

     

最新商品


     

笔记本


     

数码影音


     

配件


     

办公打印


     

    


    


      


       

            
             

  •           
              

               LG IPS237L-BN 23英寸IPS显示器
              


              

               ¥1299.00
              


             

  •         

           

      


    


   

上面的html是部分,可以用el表达式循环下,多搞几个。。。
一个上午才做好。。。

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