zoukankan      html  css  js  c++  java
  • jQuery 实现公告无缝滚动

    HTML
    <div id="hotTopic">
                  <div class="wrap">
    <ul id="talking">
        <li><a href="#">世界经典音乐剧《妈妈咪呀》1</a></li>
        <li><a href="#">阿童木</a></li>
        <li><a href="#">圣斗士</a></li>
        <li><a href="#">喜羊羊与灰太狼</a></li>
        <li><a href="#">地球超人</a></li>
        <li><a href="#">变形金刚</a></li>
        <li><a href="#">迪士尼</a></li>
    </ul>
    <ul id="scroll"></ul>
    </div>
    </div>

    JS

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    var speed=30; 
    var $tab=$("#hotTopic"); 
    var $tab1=$("#talking"); 
    var $tab2=$("#scroll"); 
    $tab2.html($tab1.html()); 
    function Marquee(){ 
     if($tab2[0].offsetWidth-$tab[0].scrollLeft<=0) 
     $tab[0].scrollLeft-=$tab1[0].offsetWidth; 
     else{ 
     $tab[0].scrollLeft++; 
     
     
    var MyMar=setInterval(Marquee,speed);  
    $tab.hover(function(){ 
            clearInterval(MyMar); 
            },function(){ 
            MyMar=setInterval(Marquee,speed) 
                }) 
         }) 
    </script>

    css

    #hotTopic{445px;*422px; height:20px; overflow:hidden;float:left;border:1px solid #3e6388; margin-top:-2px;*margin-top:-1px;_margin-top:0px;}
    .wrap{float: left;100000px;}
    #talking,#scroll{float:left;}
    #talking li,#scroll li{height:20px; color:#e9bb19;padding-left:10px;float:left; line-height:20px;}
    #talking li a,#scroll li a{color:#e9bb19; font-family:"宋体";}

    原博文

  • 相关阅读:
    VC CUtilityLZW 效率还行的LZW压缩算法,随机数加密
    VC CQHashNTBuffer 牛逼的Hash表 UINT32
    VC CHashBuffer 牛逼的hash表算法,字符串查找块了100倍
    关闭Fedora防火墙
    gnome 屏幕截图
    zynq -- arm-xilinx-eabi-路径
    Fedora 14安装出现的错误
    fedora19安装后,需要安装的一些必备的软件包
    zynq -- cannot find -lxil
    Zynq -- 启动过程
  • 原文地址:https://www.cnblogs.com/luhuimin/p/3708551.html
Copyright © 2011-2022 走看看