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秒
    })
  • 相关阅读:
    oracle 11g 数据库密码大小写敏感性更改
    OGG 课程 第一课
    xmanager
    一步一步在RHEL6.5+VMware Workstation 10上搭建 oracle 11gR2 rac + 物理 dg
    GTONE安装Eclipse插件
    JDK安装与环境变量配置
    JAVA基础
    操作符总结
    物理CPU查看方式
    SQL SERVER性能调优
  • 原文地址:https://www.cnblogs.com/xiaoqi2018/p/10164822.html
Copyright © 2011-2022 走看看