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>
  • 相关阅读:
    关于使用stanfordcorenlp一直运行不报错的解决方法
    小程序项目报错
    小程序项目学习笔记
    如何将知网下载的caj文件转换为pdf文件
    干眼症治疗方法
    事务基础
    Android的四大组件
    异步任务AsyncTask使用解析
    Android Service的生命周期
    2016 校招, Android 开发,一个本科应届的坎坷求职之路(转)
  • 原文地址:https://www.cnblogs.com/xiaoqi2018/p/10813260.html
Copyright © 2011-2022 走看看