深圳全飞鸿

标题: 显示滚动文字的一种方法 [打印本页]
作者: zhgc    时间: 2021-8-16 20:03
标题: 显示滚动文字的一种方法
  1. <!doctype html>
  2. <html>
  3.         <head>
  4.         <meta charset="utf-8">
  5.         <title>[url]www.nagomes.com[/url]</title>
  6.         <script type="text/javascript" src="js/jquery.js"></script>
  7.         </head>
  8.         <style>
  9. .adduser{ height:6.0rem; overflow: hidden;}
  10. .adduser ul{ margin-top:0; }
  11. .adduser li{ height:1.5rem; list-style-type:none; }
  12.         </style>
  13.         <script type="text/javascript">
  14.         $(document).ready(function(){
  15.                 var html2=$(".adduser ul").html()
  16.                 $(".adduser ul").append(html2)
  17.                 var ls2=$(".adduser li").length/2+1
  18.                 a=0
  19.                 ref = setInterval(function(){
  20.                         a++
  21.                         if(a==ls2){
  22.                                 a=1
  23.                                 $(".adduser ul").css({marginTop:0})
  24.                                 $(".adduser ul").animate({marginTop:-'1.5'*a+'rem'},500)
  25.                         }
  26.             $(".adduser ul").animate({marginTop:-'1.5'*a+'rem'},500)
  27.                 },1000);
  28.         })
  29.         </script>
  30.         <body>

  32.           <div class="adduser">
  33.             <ul class="clearfix">
  34.                   <li class="clearfix"> <span>11今日新增会员列表 24岁 - 女 - 广州 </span> </li>
  35.                   <li class="clearfix"> <span>12今日新增会员列表 24岁 - 女 - 广州 </span> </li>
  36.                                                                         <li class="clearfix"> <span>13今日新增会员列表 24岁 - 女 - 广州 </span> </li>
  37.                   <li class="clearfix"> <span>14今日新增会员列表 24岁 - 女 - 广州 </span> </li>
  38.                                                                         <li class="clearfix"> <span>15今日新增会员列表 24岁 - 女 - 广州 </span> </li>
  39.                   <li class="clearfix"> <span>16今日新增会员列表 24岁 - 女 - 广州 </span> </li>
  40.                 </ul>
  41.           </div>

  43. </body>
  44. </html>
复制代码







欢迎光临 深圳全飞鸿 (http://www.nagomes.com/disc/) Powered by Discuz! X3.2