学员使用移动端进行自学的视频动画html,Html5移动端获奖无缝滚动动画实现示例...

本文介绍了Html5移动端获奖无缝滚动动画实现示例，分享给大家，具体如下：

需求分析

哈哈，上动态图真的是一下就明了了。

就是滚动么滚动，那么制作这个有什么方法呢？我们来总结一下:

html骨架

其实很简单，最外面的

是做固定的窗口，里面的

• 控制运动，
• 里面是展示动画
  • 第一个结构
  • 第二个结构
  • 第三个结构
  • 第四个结构
  • 第五个结构
  • 第六个结构
  • 第七个结构
  • 第八个结构

  基本css样式

  先把基本的css样式实现*{ margin:0; padding:0;}.roll{ margin: 100px auto; width: 200px; height: 40px; overflow:hidden; border: 1px solid aquamarine;}.roll ul{ list-style: none;}.roll li{ line-height:20px; font-size:14px; text-align:center;}

  可以看看大致的样式:

  实现思路

  一、使用jquery的animate动画

  animate()方法

  $(selector).animate(styles,speed,easing,callback)

  参数：styles:必需参数，需要产生动画的css样式(使用驼峰式命名)speed: 规定动画的速度@number:1000(ms)@string:"slow","normal","fast"easing:动画速度(swing,linear)callback:函数执行完之后的回调函数$(document).ready(function(){ setInterval(function(){ // 添加定时器，每1.5s进行转换 $("#roll").find("ul:first").animate({ marginTop:"-40px" //每次移动的距离 },500,function(){ // 动画运动的时间 //$(this)指的是ul对象， //ul复位之后把第一个元素和第二个元素插入 //到ul的最后一个元素的位置 $(this).css({marginTop:"0px"}).find("li:first").appendTo(this); $(this).find("li:first").appendTo(this); }); },1500) });

  看看效果:

  二、使用css3的animation动画

  通过css3中的关键帧，可以得到跳步的效果。先通过一个短的看一下思路。

  初步

  1.如果是写死的获奖，那么需要把前面的那个复制一份到后面去，如果是一个一个滚动那么就复制第一个，如果是两个两个滚动的就复制第一个和第二个。

  • 第一个结构
  • 第二个结构
  • 第三个结构
  • 第四个结构
  • 第五个结构
  • 第六个结构
  • 第七个结构
  • 第八个结构
  • 第一个结构
  • 第二个结构

  2.然后计算需要滚动多少次，一次多少秒,例子是两个两个滚动，需要5s，所以css3的animation的时间是5s。那么@keyframe需要分成几份呢？因为是停顿，每一个滚动都需要两份，最后一个要跳动所以只有一份，所以需要5 * 2 - 1 = 9份，看代码就晓得了：/*这里不做兼容性处理*/.roll ul{ list-style: none; animation: ani 5s linear infinite; /*动画ani，5s，循环匀速播放*/}@keyframes ani{ 0%{ margin-top: 0; } 12.5%{ margin-top: 0; } 25%{ margin-top: -40px; } 37.5%{ margin-top: -40px; } 50%{ margin-top: -80px; } 62.5%{ margin-top: -80px; } 75%{ margin-top: -120px; } 87.5%{ margin-top: -120px; } 100%{ margin-top: -160px; /*最后是一个，这样可以打断动画*/ }}

  进阶

  如果个数不确定，那么就需要动态的计算，用js动态地添加@keyframes ，到时候只要自己可以计算清楚间隔还有移动的距离就好。

  1.首先获取

• 的长度length2.然后计算间隔百分比，因为有停顿所以记得要用秒数×23.然后用字符串拼写@keyframes，0~length，包括length，因为多一个，双数和单数分开。4.把
  • 中的第一个和第二个克隆到
    • 的最后5.创建一个