基于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 相关文章推荐
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
jQuery 联动日历实现代码
May 31 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
js控制的遮罩层实例介绍
May 29 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
Angular4.0动画操作实例详解
May 10 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 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
德生PL330的评价与改造
2021/03/02 无线电
php实现给一张图片加上水印效果
2016/01/02 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
setTimeout学习小结
2017/02/08 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
vue ssr 指南详读
2018/06/29 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
python数据类型_字符串常用操作(详解)
2017/05/30 Python
Python numpy 常用函数总结
2017/12/07 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
python如何实现一个刷网页小程序
2018/11/27 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
ORACLE十问
2015/04/20 面试题
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
车间班组长岗位职责
2013/11/13 职场文书
化学专业毕业生自荐信
2013/11/15 职场文书
银行金融服务方案
2014/06/11 职场文书
人代会标语
2014/06/30 职场文书
工会工作先进事迹
2014/08/18 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python