第41天：匀速、缓动运动和图片无缝滚动

一、匀速运动和缓动运动

缓动运动
公式：leader=leader+(target-leader)/10;//leader为初始值0，target为结束值,10可以改变，值越大，速度越慢

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>运动</title>
 6     <style>
 7         .box{ 8             width: 200px;
 9             height: 200px;
10             background-color: yellow;
11             position: absolute;
12             top:100px;
13             left:0;
14         }
15     </style>
16 </head>
17 <body>
18     <button id="btn">开始</button>
19     <div class="box" id="Box"></div>
20 </body>
21 <script>
22     var btn=document.getElementById("btn");
23     var box=document.getElementById("Box");
24     //匀速运动
25    /* var timer=null;
26     var num=0;
27     btn.οnclick=function(){
28         timer=setInterval(function(){
29             num++;
30             if(num>500){
31                 clearInterval(timer);
32             }else{
33                 box.style.left=num+"px";
34             }
35 36         },10);
37     }*/
38
39    // 缓动运动
40     var leader=0;
41     var target=500;
42     btn.onclick=function(){
43         setInterval(function(){
44             leader=leader+(target-leader)/10;//速度逐渐变慢
45             box.style.left=leader+"px";
46         },10)
47     }
48 </script>
49 </html>

二、图片无缝滚动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>图片无缝滚动</title>
 6     <style>
 7         *{ 8             margin: 0;
 9             padding: 0;
10         }
11         ul{12             list-style: none;
13         }
14         img{15             vertical-align: top;
16         }
17
18         .box{19             width: 600px;
20             height: 200px;
21             background-color: pink;
22             margin:100px auto;
23             position: relative;
24             overflow: hidden;
25         }
26         .box ul{27             width: 400%;
28             position: absolute;
29             left: 0;
30             top:0;
31         }
32         .box ul li{33
34             float: left;
35         }
36     </style>
37 </head>
38 <body>
39     <div class="box" id="scroll">
40         <ul >
41             <li><img src="data:images/01.jpg" alt=""></li>
42             <li><img src="data:images/02.jpg" alt=""></li>
43             <li><img src="data:images/03.jpg" alt=""></li>
44             <li><img src="data:images/04.jpg" alt=""></li>
45             <li><img src="data:images/01.jpg" alt=""></li>
46             <li><img src="data:images/02.jpg" alt=""></li>
47         </ul>
48     </div>
49 </body>
50 <script>
51     var scroll=document.getElementById("scroll");//大盒子
52     var ul=scroll.children[0];
53     var num=0;//控制左侧的值 left
54     var timer=null;//存定时器
55     timer=setInterval(autoPlay,5);
56     function autoPlay(){
57         num--;
58         num<=-1200?num=0:num;
59         ul.style.left=num+"px";
60     }
61
62     scroll.onmouseover=function(){//鼠标经过大盒子 停止滚动
63         clearInterval(timer);
64     }
65     scroll.onmouseout=function(){
66         timer=setInterval(autoPlay,5);//鼠标离开 开始滚动
67
68     }
69 </script>
70 </html>运行效果：

转载于:https://www.cnblogs.com/le220/p/7583278.html

第41天：匀速、缓动运动和图片无缝滚动相关推荐

js简单动画：匀速动画、缓动动画、多物体动画以及透明度动画
主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画效果实现: 1.匀速动画(以物体左右匀速运动为例) ...
【JS动画基础】闪动，匀速，缓动。
JS 动画之闪动,匀速,缓动. 由于本人记性不好,所以爱忘一些东西,现在将常用的写在这里. 废话不多说,直奔主题. 先是HTML部分. <div id="div1">& ...
运动曲线研究(缓动效果)
刚刚学习了一下网页动画中上的缓动效果,分享一下学习心得. 缓动曲线的概念: 缓动曲线是一个0为起点的连续函数曲线,x轴表示时间变化,y轴表示位移变化.曲线的斜率反映出运动的数度. 缓动效果在Flash ...
匀速动画VS缓动动画（超详细）
文章目录匀速动画匀速动画案例描述匀速动画案例图示 HTML+CSS 匀速动画JS代码匀速动画JS代码改进----函数封装缓动动画缓动动画案例描述缓动动画案例图示 HTML+CSS 缓动动 ...
Egret_Tween缓动动画
通常情况下,游戏中或多或少都会带有一些缓动动画.例如界面弹出,或者道具飞入飞出的特效等等.在制作这些缓动动画的时候我们仅仅希望简单的办法实现这种移动或者变形缩放的效果.Egret中的 Tween 缓 ...
用缓动函数模拟物理动画
1.缓动函数简介 <1>缓动函数的动画效果是建立在CALayer层级的关键帧动画基础之上也就是说用普通的UIView的Animation是无法直接实现缓动函数 <2>缓动函数 ...
WPF与缓动(一) N次缓动
WPF与缓动(一) N次缓动 ...
jQuery特效 | 导航底部横线跟随鼠标缓动
jQuery特效 | 导航底部横线跟随鼠标缓动 2月初,接收到了公众号读者的效果需求,希望能够讲解这样一个实例: 横排的导航,下边框是一条横线,随着鼠标移入某个导航,横线滑动到相应位置. 今天就针对该 ...
JS实现动画特效2（缓动函数封装、导航栏筋斗云效果）
JS实现的动画特效:手风琴特效展示图片.筋斗云动画一.小知识 1.浏览器的offsetLeft是就近取整,要实现向上取整或向下取整,可以调用Math.ceil()或Math.floor() 2.想要 ...

第41天：匀速、缓动运动和图片无缝滚动

第41天：匀速、缓动运动和图片无缝滚动相关推荐

最新文章

热门文章