Javascript Mouse Move up slider follow effect code share _javascript Tips

Source: Internet
Author: User

Let's take a screenshot first.

The mouse moves to the corresponding classification, the following red small triangle will automatically follow, slow to follow.
No matter how many are available.
JavaScript code:

Copy Code code 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<obj.length;i++) {
try{
var base=obj[i].getelementsbyclassname (' Products-box-center-title ') [0]; Get each title
var elems=base.getelementsbyclassname (' Products-items-title ');
for (Var j=0;j<elems.length;j++) {
var elem=elems[j];
Elem.onmousemove=function () {
Gets the parent container of the current object's parent container
var baseelem=this.parentelement.parentelement;
var baseindex=indexof (Obj,baseelem) +1;

Gets 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 color of the current object and other objects
This.style.color = "Red";
Gets all the elements under the current parent container
var notes=this.parentelement.getelementsbyclassname (' Products-items-title ');
for (Var k=0;k<notes.length;k++) {
if (This!=notes[k])
Notes[k].style.color= "#666";
}

};
}

}
catch (e) {
Alert (e);
}
};

}

HTML code:

Copy Code code as follows:

<div class= "Products-box-center" >
<div class= "Products-box-center-title" >
<div class= "Products-items-title products-focus-text" ><div class= "Products-items-title" ><div class= "products-items-title" ><div class= "Products-items-title" ><div class= "Products-items-title" ><div class= "Products-bottom-triangle" id= "Products-triangle-${index.count}" ><b class= "triangle" ></ B></div>
</div>

<div class= "Products-box-panel" >

<div class= "Products-item" >

<ul>
<c:foreach begin= "1" end= "ten" >
<li>
<a href= "#" ></a>
<div class= "P-name" >
<a href= "#" &GT;LG ips237l-bn 23-inch IPS monitor </a>
</div>

<div class= "P-price" >
<span>¥1299.00</span>
</div>

</li>
</c:forEach>
</ul>
</div>

</div>

</div>

The above HTML is a part, you can use the El expression loop, a few more ...
Only a morning to do ...

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.