How to realize the navigation effect of Jingdong sidebar by jquery

This article mainly introduces the relevant knowledge of "how to achieve the navigation effect of Jingdong sidebar by jquery". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope that this article "how to achieve the navigation effect of Jingdong sidebar by jquery" can help you solve the problem.

Style code

* {padding: 0; margin: 0; border: 0;} body {height: 2000px;} .right _ ng {width: 40px; height: 100%; position: absolute; position: fixed; right: 0px; background: # 666666;} .sign {width: 40px; height: 40px; margin-top:280%;} .sign _ top {margin-top: 10px;} .sign _ add_height {height: 140px; background: # 888888 Color: # ffffff; font-size: 13px; list-style: none; font-weight: bold;} .sign _ add_height ul {margin-top: 6px; cursor: pointer;} .sign _ add_height ul li {list-style-type: none; width: 20px; height: 20px; margin-top: 5px;} buy {width: 20px; height: 20px; border-radius: 10px 10px; background:#666 } .sign _ QR {margin-top: 200%; position: absolute; bottom: 50px; position: fixed; background: # 666666;} .sign _ end {position: absolute; bottom: 0px; position: fixed; background: # 666666;} .sign img {width: 22px; height: 22px; margin-top: 10px; cursor: pointer;} .run _ sign {width: 100px; height: 40px; margin-left:-100px; margin-top:-35px Background: # 666666; color: # 1afa29; font-size: 13px; line-height: 40px; cursor: pointer;} .run _ QR {height: 250px; width: 200px; margin-left:-200px; margin-top:-245px;} .sign _ float {position: fixed;}

JQuery code

Here, change the name of the picture to a number, and each icon has two pictures, one white and one green. When the mouse moves over one of the icons, change its picture to change color, because there are a total of eight icons. So there are 16 pictures in total. So the picture name is changed to the current picture name number + 8.

The dynamics used here are slideDown and slideUp. It is important to note that you need to set the index to find the location of the previous object (because it is in the for loop that you have the index to find the digital name of the image of the current object).

$(function () {$('.run _ sign'). Css (' display','none'); $(".run _ QR img"). Attr ("src", "img/17.png"); for (var item0)