首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第41天:匀速、缓动运动和图片无缝滚动

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

作者头像
半指温柔乐
发布2018-09-11 15:02:23
8120
发布2018-09-11 15:02:23
举报
文章被收录于专栏:前端知识分享前端知识分享

一、匀速运动和缓动运动

缓动运动 公式: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.onclick=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="images/01.jpg" alt=""></li>
42             <li><img src="images/02.jpg" alt=""></li>
43             <li><img src="images/03.jpg" alt=""></li>
44             <li><img src="images/04.jpg" alt=""></li>
45             <li><img src="images/01.jpg" alt=""></li>
46             <li><img src="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>
运行效果:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-09-23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档