jQuery实现产品滚动效果

浏览数：35 / 时间：2015年06月09日

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

    });