zoukankan      html  css  js  c++  java
  • jquery单行文字上下循环滚动

    html代码:

    <div class="box">
    <div class="t_news">
    <b>已关联奖励账号、昵称:</b>
    <ul class="news_li">
    <li>张XX 151****0623</li>
    <li>陈XX 159****8933</li>
    <li>吴XX 188****5113</li>
    <li>徐XX 176****3323</li>
    <li>赵XX 187****5553</li>
    </ul>
    <ul class="swap"></ul>
    </div>
    </div>
    css代码:
    *{ padding:0; margin:0; font-size:12px}
    ul,li{ list-style:none;}
    .box{ height:35px; overflow:hidden;}
    .t_news{ height:19px; color:#444; padding-left:10px; margin:8px 0; overflow:hidden; position:relative;}
    .t_news b{ line-height:17px; font-weight:normal; display:inline-block;}
    .news_li,.swap{ line-height:19px; display:inline-block; position:absolute;left:72px;}
    .news_li ,.swap {color:#444;}
    .swap{top:19px;}
     
    js代码:
    // JavaScript Document
    function b(){   
        t = parseInt(x.css('top'));
        y.css('top','19px');    
        x.animate({top: t - 19 + 'px'},'slow'); //19为每个li的高度
        if(Math.abs(t) == h-19){ //19为每个li的高度
            y.animate({top:'0px'},'slow');
            z=x;
            x=y;
            y=z;
        }
        setTimeout(b,3000);//滚动间隔时间 现在是3秒
    }
    $(document).ready(function(){
        $('.swap').html($('.news_li').html());
        x = $('.news_li');
        y = $('.swap');
        h = $('.news_li li').length * 19; //19为每个li的高度
        setTimeout(b,3000);//滚动间隔时间 现在是3秒
    })
  • 相关阅读:
    fedora 27
    Python3 字符串操作
    python3 使用matplotlib画图问题
    Python3 移动文件——合集
    MySQL开放外部链接
    python之csv操作问题
    Question
    17-12-21
    python之List排序
    ubuntu版的sublime-text3输入中文问题
  • 原文地址:https://www.cnblogs.com/xiaoqi2018/p/10164822.html
Copyright © 2011-2022 走看看