zoukankan      html  css  js  c++  java
  • jQuery实现自上而下滚动的公告栏(可悬停)

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>文字公告滚动轮播-jq22.com</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <style>
    * {
        margin:0;
        padding:0;
    }
    li {
        list-style:none;
    }
    .news {
        height:35px;
        background:#fff;
        overflow:hidden;
    }
    .news .t_news {
        height:20px;
        color:#2a2a2a;
        margin-top:15px;
        overflow:hidden;
        position:relative;
        width:500px;
    }
    .news .news_li,.swap {
        line-height:20px;
        display:inline-block;
        position:absolute;
        top:0;
        right:0;
        font-size:14px;
        text-align:right;
        color:#585858
    }
    .news .swap {
        top:20px;
    }
    </style>
    </head>
    <body>
    <div class="news">
        <div class="t_news">
            <ul class="news_li">
                <li>1 一只傻阿贝哟</li>
                <li>2 一只傻阿贝哟</li>
                <li>3 一只傻阿贝哟</li>
                <li>4 一只傻阿贝哟</li>
                <li>5 一只傻阿贝哟</li>
            </ul>
            <ul class="swap"></ul>
        </div>
    </div>
    
    <script>
    $('.swap').html($('.news_li').html());
    x = $('.news_li');
    y = $('.swap');
    h = $('.news_li li').length * 20; //20为每个li的高度
    var hh = $('.news_li li').length;
    if (hh > 1)
        //setTimeout(b,3000);//滚动间隔时间 现在是3秒
        b();
    b();
    
    function b() {
        t = parseInt(x.css('top'));
        //alert(t)
        y.css('top', '20px');
        x.animate({
            top: t - 20 + 'px'
        }, 'slow'); //20为每个li的高度
        if (Math.abs(t) == h - 20) { //20为每个li的高度
            y.animate({
                top: '0px'
            }, 'slow');
            z = x;
            x = y;
            y = z;
        }
        setTimeout(b, 3000); //滚动间隔时间 现在是3秒
    }
    </script>
    
    </body>
    </html>
  • 相关阅读:
    安卓中期小作业
    安卓大作业UI预定搞
    实验3
    实验一总结
    实验8 SQLite数据库操作
    实验6 在应用程序中播放音频和视频
    实验4 颜色、字符串资源的使用
    实验四
    实验三
    实验二
  • 原文地址:https://www.cnblogs.com/xiaoqi2018/p/10813260.html
Copyright © 2011-2022 走看看