博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
手机端公告文本回滚(简单的jq代码)
阅读量:6531 次
发布时间:2019-06-24

本文共 1292 字,大约阅读时间需要 4 分钟。

<style>

  .inform{height:2rem;width:100%;margin-bottom: 0.75rem;position: relative;overflow: hidden;}

  .inform_wrap{height:2rem;width:94%;margin: 0 auto;background: #fff;border-radius: 0.2rem;font-size: 0.55rem;position: absolute;top:0rem;left:3%;}
  .inform_wrap p{line-height: 2rem;padding-left:1rem;background: url("../images/lab.png") 0 center no-repeat;background-size: 0.65rem 0.55rem}
  .inform_wrap p span{float:right;color:#a9a9a9;}

</style>

<div class="inform">

  <div class="inform_wrap" id="rollText">
    <p>哈利波** 成功获得 1.00 元奖励<span>2017/09/23 12:04</span></p>
    <p>哈利波** 成功获得 2.00 元奖励<span>2017/09/23 12:04</span></p>
    <p>哈利波** 成功获得 3.00 元奖励<span>2017/09/23 12:04</span></p>
    <p>哈利波** 成功获得 4.00 元奖励<span>2017/09/23 12:04</span></p>
    <p>哈利波** 成功获得 5.00 元奖励<span>2017/09/23 12:04</span></p>
    <p>哈利波** 成功获得 6.00 元奖励<span>2017/09/23 12:04</span></p>
  </div>
</div>

<script type="text/javascript">

  var listSum = $('#rollText p').length*2;  //高为几像素,就乘几,否则显示不全
  var cur = 0;
  setInterval(function(){
    cur = cur+2;
    if(cur >= listSum){
    cur = 0;
    $('#rollText').animate({
      'top':'0'
    },2);
  }else{
    $('#rollText').animate({
      'top':( -cur +'rem')
    },500);
  }
  },3000);
</script>

 

转载于:https://www.cnblogs.com/xiaokele1314/p/7614108.html

你可能感兴趣的文章
LINUX中常用操作命令
查看>>
python 获取进程pid号
查看>>
链表中插入一个节点的三种情况
查看>>
洛谷.4180.[模板]次小生成树Tree(Kruskal LCA 倍增)
查看>>
TCL函数“参数自动补全” 与 “help 信息显示”
查看>>
POJ1050To the Max
查看>>
汇编基础--标识符、标号、伪指令和指令
查看>>
Linux软中断、tasklet和工作队列
查看>>
如何解决ORA-28002 the password will expire within 7 days问题(密码快过期)
查看>>
Asp.Net Core 轻松学-利用日志监视进行服务遥测
查看>>
LightSwitch社区资源搜集
查看>>
Android通讯录查询篇--ContactsContract.Data 二(续)
查看>>
IT人的自我导向型学习:开篇杂谈
查看>>
[原创]BizTalk动手实验系列目录
查看>>
HDU 4611Balls Rearrangement(思维)
查看>>
[LeetCode] Majority Element II
查看>>
minGW, cygwin, GnuWin32【C++的跨平台交叉编译问题】
查看>>
我的Dll(动态链接库)学习笔记(转)
查看>>
应用程序域
查看>>
有向图的拓扑排序算法JAVA实现
查看>>