基于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>

效果

赞 (0)

相关推荐

  • 基于JavaScript怎么实现让歌词滚动播放

    基于JavaScript怎么实现让歌词滚动播放

    各种音乐播放器上都有一个自动滚动播放歌词的功能,当前滚动到的歌词会高亮居中显示,即使歌词被换行也能正常居中,那么这个功能基于JavaScript怎么实现让歌词滚动播放呢?请看下文详解. 一般音乐播放器使用的歌词格式都是lrc,为了方便处理,我们这里使用XML格式的歌词.介绍一个网站:中文歌词库.它提供xml格式的歌词. 我们先来看一下这个例子的最终效果: 下面是基于jQuery的具体代码: <!DOCTYPE html> <html lang="en"> <

  • JS幻灯片可循环播放可平滑旋转带滚动导航(自写)

    JS幻灯片可循环播放可平滑旋转带滚动导航(自写)

    最近在帮别人改一些东西,在网上找了好久,但是没有相同的,自己改了下,拿出来分享下: 先展示下效果把:  index.html 页面展示代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:

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

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

    先给大家展示下效果图: 完整demo如下 每两秒随机向上或者向下滚动,如果要替换新内容,则通过html()更新内容即可(查看注释代码) <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content=&q

  • javascript+html5实现仿flash滚动播放图片的方法

    本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法.分享给大家供大家参考.具体如下: html部分: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="move.js" type="text/jav

  • jQuery实现大屏滚动播放效果

    jQuery实现大屏滚动播放效果

    本文实例为大家分享了jQuery实现大屏滚动播放效果的具体代码,供大家参考,具体内容如下 场景需求: 在大屏幕上,消息会进行一个实时滚动播报的效果,将现有的内容进行一个来回滚动的播放. 代码: <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>复选框checkbox自定义样式</title> <meta name="

  • 基于JavaScript实现一个月饼音乐播放器

    基于JavaScript实现一个月饼音乐播放器

    目录 前言 页面布局 页面背景 左侧列表 中间播放器 右侧歌词部分 总结 前言 事情的经过是这样的,媳妇中秋发了一盒月饼,里面还有一个小蓝牙音响,她说如果这个音响是个月饼造型之类的是不是更能体现出中秋的气氛.于是我就想到了可以用代码给她实现一个啊,拿出了我仅有的一点点前端看家本领(我是搞后端的),浪费我三天假期,效果图如下,本来设想的挺好,可是由于本人能力有限,没有达到自己预想的目标,仅供娱乐! 页面布局 页面采用最简单的div+css进行布局,首先将页面分为三部分,分别为左边音乐列表,中间播放

  • Android实现文字滚动播放效果的代码

    在开发时,我们会遇到文字过长,TextView不能完全展示,但又不想文字换行展示,这样有时会影响美观.这时我们就需要文字滚动播放,让用户可以看到所有的文字. 话不多说,直接上代码: import android.content.Context; import android.util.AttributeSet; import android.widget.TextView; public class MarqueTextView extends TextView { public MarqueT

  • 基于JavaScript实现购物网站商品放大镜效果

    大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能,就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>放大镜</title> <style> *{mar

  • 基于JavaScript实现淘宝商品广告效果

    基于JavaScript实现淘宝商品广告效果

    本文实例为大家分享了JavaScript实现淘宝商品广告效果的具体代码,供大家参考,具体内容如下 CSS部分: ul{ margin: 0; padding: 0; } li{ list-style: none; } #ad{ width: 298px; height: 208px; border: 1px #ff6300 solid; padding: 4px 1px; text-align: center; } #ad .listL{ float: left; } #ad .listR{ f

  • 使用JavaScript 实现时间轴与动画效果的示例代码(前端组件化)

    使用JavaScript 实现时间轴与动画效果的示例代码(前端组件化)

    目录 代码整理 JavaScript 中的 "帧" 实现"帧"的方法 1. setInterval 2. setTimeout 3. requestAnimationFrame 实现 Timeline 时间轴 实现 start 函数 实现 Animation 类 设计时间线的更新 添加 Delay 属性支持 实现暂停和重启功能 实现 Pause 实现 Resume 上一篇文章<用 JSX 实现 Carousel 轮播组件>中,我们实现了一个 "

  • 微信小程序实现抖音播放效果的实例代码

    最近项目要做一个类似于抖音的一个视频播放 需要小程序完成 在再次确定了需要这个需求的情况下就开始了(其实因为不是说这个功能不好做主要是但心做出来肯定不流畅 卡顿什么的 优化不好优化) 然后就开始啦 思路使用微信的 swiper 完成竖向滑动 然后分页加载首先先加载一次加载10个当滑动到第7个的时候加载下一页 (要处理自动播放的问题和加载多个有多个同时播放的问题) 效果图 代码 <swiper class="swiper" vertical='true' easing-functi

  • Unity实现老虎机滚动抽奖效果的示例代码

    Unity实现老虎机滚动抽奖效果的示例代码

    直接看下效果图吧: 制作思路: 设计四张图片,五个点,每个图片同时向下一个点移动,到最后一个就回到0号点,以此循环. 场景搭建: 创建Image命名为Bg作为电视框背景: 创建Image命名Mask并添加Mask组件作为电视框内容显示遮罩框: 创建四个Image作为滚动图片: 创建开始抽奖按钮: PS:实际项目中可以根据需求来动态修改图片显示,以达到的控制每次抽奖奖品内容. 源码分享: using System.Collections; using UnityEngine; using Unit

  • JavaScript实现外溢动态爱心的效果的示例代码

    JavaScript实现外溢动态爱心的效果的示例代码

    还在为节日送女朋友什么礼物而烦恼吗?最近用JavaScript制作了一个外溢动态爱心的效果,还可以在爱心上填写你想要的文字!快学习一下给自己女朋友也diy一个吧 效果演示 源码介绍 ( function() { var b=0; var c=["ms","moz","webkit","o"]; for(var a=0;a<c.length&&!window.requestAnimationFrame;++

随机推荐