首页 > 代码库 > jQuery实现产品滚动效果
jQuery实现产品滚动效果
html:
<div class="win_list_b"> <div class="scroll" style="height: 198px; overflow: hidden; position: relative;"> <ul class="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>150 **** 2730</li> <li>153 **** 1527</li> <li>135 **** 0166</li> <li>155 **** 2161</li> <li>182 **** 2956</li> <li>152 **** 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>
jQuery:
$(function(){ var scroll = $(".scroll"), list = $(".win_list"); var height = $(".win_list_b").height(), listHeight = list.outerHeight(); scroll.css({"height":height,"overflow":"hidden","position":"relative"}); list.css({"position":"absolute","top":0}); var speed = 80; function marquee(){ var top = parseInt(list.css("top")); if(top <= height-listHeight){ list.css({"top":0}); }else{ list.css({"top":top-1}); } } setInterval(marquee,speed); var mainNav = $("#main-navbar"); $(window).scroll(function(){ if($(window).scrollTop()>40){ mainNav.css({"background":"#222","opacity":"0.7"}); }else{ mainNav.css({"background":"transparent","opacity":"1"}); } }); });
jQuery实现产品滚动效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。