开发一个小程序多少钱_js完成盒子滚动动画效果

日期:2021-01-05 类型:行业动态 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

js实现盒子滚动动画效果       这篇文章主要为大家详细介绍了js实现盒子滚动动画效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现盒子滚动动画效果的具体代码,供大家参考,具体内容如下

1、效果图1:

2、效果图2:

3、源代码如下:

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 meta name="viewport" content="width=device-width, initial-scale=1.0" 
 title Document /title 
 style 
 margin: 0;
 padding: 0;
 .box1{
 /* 必须加定位才可以动 */
 position: absolute;
 left: 0;
 width: 50px;
 height: 50px;
 background-color: blueviolet;
 /style 
 /head 
 body 
 div /div 
 script 
 // 动画原理:
 // 1.获得盒子当前位置
 // 2.让盒子在当前位置加上2px 的移动距离
 // 3.利用定时器不断重复中国操作
 // 4.接触定时器
 // 5.注意添加定位,才可以使用element.style.left
 var box1 =document.querySelector('.box1') // 获取事件源
 var timer = setInterval(function(){
 if( box1.offsetLeft = 500){
 clearInterval(timer); // 清除定时器
 }else{
 // 每50毫秒就将新的值给box1.left
 box1.style.left = box1.offsetLeft +2 +'px';
 },50)
 /script 
 /body 
 /html 

4、喜欢的朋友记得 点赞 转发 关注噢

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。