基于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 相关文章推荐
JavaScript RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 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中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
python实现学生管理系统
2018/01/11 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
学校招生宣传广告词
2014/03/19 职场文书
工地安全质量标语
2014/06/07 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
员工规章制度范本
2015/08/07 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
Python字典的基础操作
2021/11/01 Python