基于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入门教程(6) Window窗口对象
Jan 31 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
vue.js的安装方法
May 12 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
Vuejs实现购物车功能
Nov 05 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
JS访问对象两种方式区别解析
Aug 29 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
FCK调用方法..
2006/12/21 Javascript
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
JavaScript实用技巧(一)
2010/08/16 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
Javascript复制实例详解
2016/01/28 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
python复制文件代码实现
2013/12/23 Python
Python heapq使用详解及实例代码
2017/01/25 Python
python树莓派红外反射传感器
2019/01/21 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
PHP面试题及答案一
2012/06/18 面试题
Sql面试题
2013/03/20 面试题
建筑自我鉴定
2013/10/19 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
党内外群众意见范文
2015/06/02 职场文书
电影雷锋观后感
2015/06/10 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
Python first-order-model实现让照片动起来
2022/06/25 Python