码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实现产品滚动效果

时间:2014-09-29 13:28:20      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   ar   sp   div   

html:

bubuko.com,布布扣
<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:

bubuko.com,布布扣
    $(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实现产品滚动效果

标签:style   blog   http   color   io   os   ar   sp   div   

原文地址:http://www.cnblogs.com/lihongchen/p/3999771.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!