第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.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>
运行效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏yang0range

CSS常见属性

现在的互联网前端三层: HTML 超文本标记语言 从语义的角度描述页面结构。 CSS 层叠式样式表 从审美的角度负责页面样式。 JS ...

1113
来自专栏IMWeb前端团队

Android 浏览器文本垂直居中问题

问题描述 在开发中,我们常使用 line-height 属性来实现文本的垂直居中,但是在安卓浏览器渲染中有一个常见的问题,就是对于小于12px的字体使用 lin...

4246
来自专栏前端布道

CSS3实现多样的边框效果

1081
来自专栏Coco的专栏

你所不知道的 CSS 滤镜技巧与细节

2655
来自专栏Modeng的专栏

Canvas学习系列二:Canvas的坐标系统

版权声明:本文为原创文章发布于公众号:Modeng , 你可以随意转载但请务必注明出处!!! https://blog.csdn.net/qq_321352...

2311
来自专栏程序员阿凯

为 DP 设计布局

1395
来自专栏HTML5学堂

谁说不能用代码实现酷炫的文字特效?

HTML5学堂:文本阴影是一个很神奇的属性,在它还没有出现之前,网页中对于阴影的制作一般都是采用Photoshop做成图片来实现的。而在CSS3流行的当下,我们...

3953
来自专栏HTML5学堂

CSS3文本阴影 text-shadow

HTML5学堂:CSS3文本阴影是给文本添加阴影效果,而在CSS3文本阴影在CSS以及存在了,只是CSS2.1的时候不用了,但是在CSS3又重新使用了,这是因为...

4347
来自专栏我和未来有约会

Silverlight初级教程-绘图布局

Silverlight初级教程 绘图布局 正如之前所说Blend是和flash很像的东西。在这里将介绍一下如何在Blend中绘图。 这里的Blend中“舞台...

1878
来自专栏Coco的专栏

你所不知道的 CSS 滤镜技巧与细节

1795

扫码关注云+社区