Html:
<divclass="Win_list_b"> <divclass="Scroll"style="height:198px; overflow:hidden; position:relative ;"> <ulclass="win_list"style="position:absolute; top: -123px;"> <li>137****4110</li> <li>151****8520</li> <li>182****6014</li> <li>186****6390</li> <li>135****1322</li> <li>185****9479</li> <li>186****0935</li> <li>136****6673</li> <li> Max****2730</li> <li>153****1527</li> <li>135****0166</li> <li>155****2161</li> <li>182****2956</li> <li> the****6096</li> <li>136****7093</li> <li>131****3328</li> <li>134****1917</li> <li>156****1963</li> <li>133****3180</li> <li>185****5689</li> </ul> </div> </div>
View Code
Jquery:
$ (function () {varScroll = $ (". Scroll"), List= $(". Win_list"); varHeight = $ (". Win_list_b"). Height (), Listheight=list.outerheight (); Scroll.css ({"Height": Height,"Overflow":"Hidden","position":"relative"}); List.css ({"position":"Absolute","Top":0}); varSpeed = the; Function Marquee () {vartop = parseint (List.css ("Top")); if(Top <= height-listheight) {List.css ({"Top":0}); }Else{list.css ({"Top": top-1}); }} setinterval (Marquee,speed); varMainnav = $ ("#main-navbar"); $ (window). Scroll (function () {if($ (window). scrolltop () > +) {mainnav.css ({"background":"#222","Opacity":"0.7"}); }Else{mainnav.css ({"background":"Transparent","Opacity":"1"}); } }); });View Code
jquery Implements product scrolling effects