基于JavaScript实现新增内容滚动播放效果附完整代码


Posted in Javascript onAugust 24, 2017

先给大家展示下效果图:

基于JavaScript实现新增内容滚动播放效果附完整代码

完整demo如下

每两秒随机向上或者向下滚动,如果要替换新内容,则通过html()更新内容即可(查看注释代码)

<!DOCTYPE html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style>
    ul,li{
      list-style-type:none;
      border: solid;
    }
    ul{
      overflow: hidden;/*让li超出ul时隐藏*/
    }
    body{
      margin: 0px;
    }
  </style>
</head>
<body>
<div>
  <ul>
    <li>
      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503543418892&di=1f606f0990cf6fa893c8330457b5fde2&imgtype=0&src=http%3A%2F%2Fi3.hoopchina.com.cn%2Fblogfile%2F201509%2F16%2FBbsImg144240668814516_480*360.jpg"/>
    </li>
    <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503543451619&di=a578daa6b6f794cb233f655cd5ecaf91&imgtype=0&src=http%3A%2F%2Fimg.qqzhi.com%2Fupload%2Fimg_0_3518803618D2241430362_23.jpg"/>
    </li>
    <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503544550636&di=086d271111b428fadf9e23abb7c06b1e&imgtype=0&src=http%3A%2F%2Fuploads.yeyoujia.com%2Fcms%2Fimages%2F2017%2F02%2F10%2F589d8e4598d46285900450.png">
    </li>
  </ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
  function getRandom(min, max){
    var r = Math.random() * (max - min);
    var re = Math.round(r + min);
    re = Math.max(Math.min(re, max), min)
    return re;
  }
  $(function(){
    setInterval(function(){
      if(getRandom(0,1)==0){
        //向上滚动特效
        var ul = $("ul");
        var $first = ul.find('li:first');
        var height = $first.height();
        $first.animate({
          marginTop: -height + 'px'
        }, 500, function() {
//          $first.css('marginTop', 0).html(new Date().getMinutes()+":"+new Date().getSeconds()).appendTo(ul);/*不要写成append*/
          $first.css('marginTop', 0).appendTo(ul);
        });
      }else{
        //向下滚
        var ul = $("ul");
        var liHeight = ul.find("li:last").height();//计算最后一个li元素的高度
        ul.animate({marginTop : liHeight +"px"},500,function(){
//          ul.find("li:last").html(new Date().getMinutes()+":"+new Date().getSeconds()).prependTo(ul);/*不要写成prepend*/
          ul.find("li:last").prependTo(ul);/*不要写成prepend*/
          ul.find("li:first").hide();
          ul.css({marginTop:0});
          ul.find("li:first").fadeIn(1000);
        });
      }
    },2000);
  });
</script>
</body>
</html>

效果

Javascript 相关文章推荐
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
Angular8 简单表单验证的实现示例
Jun 03 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
vant 中van-list的用法说明
Nov 11 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 #Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 #Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 #Javascript
JS实现电商放大镜效果
Aug 24 #Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 #Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 #jQuery
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 #Javascript
You might like
php中的时间处理
2006/10/09 PHP
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
php创建图像具体步骤
2017/03/13 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
百度留言本js 大家可以参考下
2009/10/13 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
Python中static相关知识小结
2018/01/02 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
python中append实例用法总结
2019/07/30 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
关于python中导入文件到list的问题
2020/10/31 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
行政文员岗位职责
2013/11/08 职场文书
教育技术职业规划范文
2014/03/04 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js
python中如何对多变量连续赋值
2021/06/03 Python
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang