首页 > 代码库 > 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>
View Code

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"});            }        });    });
View Code

 

jQuery实现产品滚动效果