zoukankan      html  css  js  c++  java
  • js上下滚屏效果,代码通过测试

    这是html代码

    <div class="box">
        <div class="bcon">
            <h1><b>领号实时播报</b></h1>
            <!-- 代码开始 -->
            <div class="list_lh">
                <ul>
                    <li>
                        <p><a href="http://www.16sucai.com/" target="_blank">1000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
                        <p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
                    </li>
                    <li>
                        <p><a href="http://www.16sucai.com/" target="_blank">2000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
                        <p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
                    </li>
                    <li>
                        <p><a href="http://www.16sucai.com/" target="_blank">3000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
                        <p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
                    </li>
                    <li>
                        <p><a href="http://www.16sucai.com/" target="_blank">4000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
                        <p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
                    </li>
                    <li>
                        <p><a href="http://www.16sucai.com/" target="_blank">5000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
                        <p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
                    </li>
                    <li>
                        <p><a href="http://www.16sucai.com/" target="_blank">6000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
                        <p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
                    </li>
                    <li>
                        <p><a href="http://www.16sucai.com/" target="_blank">7000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
                        <p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
                    </li>
                    <li>
                        <p><a href="http://www.16sucai.com/" target="_blank">8000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
                        <p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
                    </li>
                    <li>
                        <p><a href="http://www.16sucai.com/" target="_blank">9000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
                        <p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
                    </li>
                    <li>
                        <p><a href="http://www.16sucai.com/" target="_blank">1000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
                        <p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
                    </li>
                    <li>
                        <p><a href="http://www.16sucai.com/" target="_blank">1100000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
                        <p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
                    </li>
                    <li>
                        <p><a href="http://www.16sucai.com/" target="_blank">1200000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">领号</a><em>获得</em></p>
                        <p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">网游战江湖公测豪华礼包</a><span>17:28:05</span></p>
                    </li>
                </ul>
            </div>
            <!-- 代码结束 -->
        </div>
        
        <script type="text/javascript">
    $(document).ready(function(){
        $('.list_lh li:even').addClass('lieven');
    })
    $(function(){
        $("div.list_lh").myScroll({
            speed:40, //数值越大,速度越慢
            rowHeight:68 //li的高度
        });
    });
    </script>
        
    </div>

    这是css代码

    /* CSS Document */
    *{margin:0;padding:0;font-size:12px;}
    body{ background:none;}
    input,button,select,textarea{outline:none;}
    ul,li,dl,ol{list-style:none;}
    a{color:#666; text-decoration:none;}
    
    .box{ width:980px; margin:0 auto;}
    .bcon{ width:270px; border:1px solid #eee; margin:30px auto;}
    .bcon h1{ border-bottom:1px solid #eee; padding:0 10px;}
    .bcon h1 b{ font:bold 14px/40px '宋体'; border-top:2px solid #3492D1; padding:0 8px; margin-top:-1px; display:inline-block;}
    
    .list_lh{ height:400px; overflow:hidden;}
    .list_lh li{ padding:10px;}
    .list_lh li.lieven{ background:#F0F2F3;}
    .list_lh li p{ height:24px; line-height:24px;}
    .list_lh li p a{ float:left;}
    .list_lh li p em{ width:80px; font:normal 12px/24px Arial; color:#FF3300; float:right; display:inline-block;}
    .list_lh li p span{ color:#999; float:right;}
    .list_lh li p a.btn_lh{ background:#28BD19; height:17px; line-height:17px; color:#fff; padding:0 5px; margin-top:4px; display:inline-block; float:right;}
    .btn_lh:hover{ color:#fff; text-decoration:none;}
    
    .btm p{ font:normal 12px/24px 'Microsoft YaHei'; text-align:center;}

    这是js代码

    // JavaScript Document
    (function($){
        $.fn.myScroll = function(options){
        //默认配置
        var defaults = {
            speed:40,  //滚动速度,值越大速度越慢
            rowHeight:24 //每行的高度
        };
        
        var opts = $.extend({}, defaults, options),intId = [];
        
        function marquee(obj, step){
        
            obj.find("ul").animate({
                marginTop: '-=1'
            },0,function(){
                    var s = Math.abs(parseInt($(this).css("margin-top")));
                    if(s >= step){
                        $(this).find("li").slice(0, 1).appendTo($(this));
                        $(this).css("margin-top", 0);
                    }
                });
            }
            
            this.each(function(i){
                var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
                intId[i] = setInterval(function(){
                    if(_this.find("ul").height()<=_this.height()){
                        clearInterval(intId[i]);
                    }else{
                        marquee(_this, sh);
                    }
                }, speed);
    
                _this.hover(function(){
                    clearInterval(intId[i]);
                },function(){
                    intId[i] = setInterval(function(){
                        if(_this.find("ul").height()<=_this.height()){
                            clearInterval(intId[i]);
                        }else{
                            marquee(_this, sh);
                        }
                    }, speed);
                });
            
            });
    
        }
    
    })(jQuery);
  • 相关阅读:
    c# string 中含有双引号处理模式
    c# hashtable
    c# vs2010 添加web service引用方式
    c# xpath 获取指定值的写法
    Nginx-1.18.0的安装配置与使用
    Kubernetes 里,怎么让 Pod 有 DNS 记录?
    Wilson's theorem在RSA题中运用
    标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
    慕课网javascript 进阶篇 第九章 编程练习
    关于javascript中的this 一段小实例深有体会啊
  • 原文地址:https://www.cnblogs.com/275147378abc/p/5142079.html
Copyright © 2011-2022 走看看