使用Javascript写一组图片的缓冲运动

news/2025/2/8 16:56:51

一、先来了解一下为什么要学习运动框架呢
在我们web开发中过程中,一些特效的使用,比如:导航条中滑动的动画特效、点击加入购物车按钮有抛物线的特效,还有一些小游戏的开发等,就需要我们对动画的基础运动掌握的足够扎实。
二、关于运动的原理
JS运动,本质来说就是让web上DOM元素运动起来,要想运动起来,就改变其自身的位置属性。
我们先来看一下如何实现运动:
方法:
1.运动的物体使用绝对定位。
2.通过改变定位物体的属性(left、right、top、bottom)的值来使物体移动。如:向右或向左使用offsetlest(offsetright)来控制左右移动。
步骤:
1.开始运动之前,要先清除已有的定时器(如果不清除,连续点击按钮时,物体会运动的越来越快,造成运动混乱。)
2.开启定时器,计算速度
3.把运动和停止分开(使用if/else语句),判断停止条件,执行运动。
三、定时器
在这次项目中要用到的定时器是:
循环定时器:timer=setInterval(函数名:time);
是指在间隔时间到来时反复触发事件,是不停的使用

	function()是定时器触发时要执行的事件函数,可以是一个函数,也可以是几个函数,间隔的时间以毫秒为单位。

封装一个运动框架startMove.js,封装的代码如下:

/*
				【注】我们必须保证所有运动都到达目的值以后,才能关闭定时器。
			*/
			function startMove(node, obj, callback){
				clearInterval(node.timer);
				node.timer = setInterval(function(){

					var isEnd = true; //假设都到达目的值了

					for(var attr in obj){

						var iTarget = obj[attr];

						//1、计算速度
						//兼容透明度
						var iCur = null;
						if(attr == "opacity"){
							iCur = parseInt(parseFloat(getStyle(node, "opacity")) * 100);
						}else{
							iCur = parseInt(getStyle(node, attr));
						}
						var speed = (iTarget - iCur) / 8;
						speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
						
						if(attr == "opacity"){
							iCur += speed;
							node.style.opacity = iCur / 100;
							node.style.filter = "alpha(opacity=" + iCur + ")";
						}else{
							node.style[attr] = iCur + speed + 'px';
						}
						if(iCur != iTarget){
							isEnd = false;
						}
					}

					if(isEnd){
						clearInterval(node.timer);
						if(callback){
							callback.call(node);//重设函数的父级
						}
					}

				}, 30);
			}
			// 浏览器兼容写法
			function getStyle(node, styleType){
				return node.currentStyle ? node.currentStyle[styleType] : getComputedStyle(node)[styleType];
			}

图片缓冲运动的完整代码:

style

		<style>
			*{margin: 0px; padding: 0px}
			#div1{width: 680px; height: 170px; border: 1px solid black; margin: 100px auto; position: relative;   overflow: hidden; }
			#ul1{position: absolute; left: 0px}
			#ul1 li{list-style: none; width: 150px; height: 150px; margin: 10px; float: left;}
			#ul1 li img{width: 100%; height: 100%}
		</style>

script

	<script>
		window.onload = function(){
			var oDiv = document.getElementById("div1");
			var oUl = document.getElementById("ul1");
			var aLis = oUl.getElementsByTagName("li");

			//在ul的后面,再去添加四张图片
			oUl.innerHTML += oUl.innerHTML;
			//oUl的宽应该变成原来的两倍
			oUl.style.width = 170 * aLis.length + 'px';

			
			//缓冲运动,每一次向左运动一个图片宽
			var timer = null;

			function timerInner(){
				timer = setInterval(function(){
					startMove(oUl, {left: oUl.offsetLeft - 170}, function(){
						if(oUl.offsetLeft <= -oUl.offsetWidth / 2){
							oUl.style.left = 0;
						}
					})

				}, 2000);

			}

			timerInner();


			oDiv.onmouseover = function(){
				clearInterval(timer);
			}

			oDiv.onmouseout = function(){
				timerInner()
			}
			
		}
	</script>
<body>
		<div id = 'div1'>
			<ul id = 'ul1'>
				<li>
					<img src="img/1.jpg" alt="">
				</li>
				<li>
					<img src="img/2.jpg" alt="">
				</li>
				<li>
					<img src="img/3.jpg" alt="">
				</li>
				<li>
					<img src="img/4.jpg" alt="">
				</li>
			</ul>
		</div>
	</body>

效果图
设置的无缝效果,自动滚动,滚动时间是2秒
在这里插入图片描述
在这里插入图片描述
无缝滚动的效果,设置图片自动滚动,设置的定时器时间是每2秒滚动一次,切换到下一张图片。


http://www.niftyadmin.cn/n/2502366.html

相关文章

认识cookie会话跟踪技术

一、cookie的概念 在一次会话从开始到结束的整个过程&#xff0c;全程跟踪记录客户端的状态&#xff08;例如&#xff1a;是否登录、购物车信息、是否已下载、是否已点击、视频播放进度等&#xff09; 二、cookie的组成 cookie由名/值对形式的文本组成&#xff1a;namevalue 完…

java线程安全理解

如果你的代码所在的进程中有多个线程在同时运行&#xff0c;而这些线程可能会同时运行这段代码。如果每次运行结果和单线程运行的结果是一样的&#xff0c;而且其他的变量的值也和预期的是一样的&#xff0c;就是线程安全的。比如一个 ArrayList 类&#xff0c;在添加一个元素的…

cookie的封装及应用

最原始代码 var person {name: "小明",age: 18,sex: 男}//直接把整个对象当做参数传入function showSelf(obj){alert("我叫" obj.name , 今年 obj.age "岁,是" obj.sex "的");}// showSelf(person);showSelf({name: "小明…

PHP教程:php导入到excel-支持utf8和gbk两种编码

php导入到excel-支持utf8和gbk两种编码 php导入到excel乱码是因为utf8编码在xp系统不支持所有utf8编码转码一下就完美解决了 utf-8编码案例 <?php header(Content-Type: application/vnd.ms-excel; charsetUTF-8); header(Pragma: public); header(Expires: 0); …

关于面向对象的编程

一、面向对象是什么 面向对象是软件开发的方法&#xff0c;是一种对现实世界理解和抽象的方法&#xff0c;是计算机编程技术发展到一定阶段后的产物&#xff0c;是一种高级的编程思想。 二、面向对象的编程思想 面向过程&#xff1a;只关心数学逻辑。 面向对象&#xff1a;直接…

转一篇 搞笑的

http://www.cnblogs.com/huobazi/articles/2690.aspx转载于:https://www.cnblogs.com/huobazi/archive/2004/03/10/2676.html

SQL Server 中截取日期的日期部分与时间部分

SQL Server 中截取日期的日期部分与时间部分 CONVERT ( data_type [ ( length ) ] , expression [ , style ] )SQL Server 中截取日期的日期部分&#xff1a; select convert(varchar(10),getdate(),120)SQL Server 中截取日期的时间部分&#xff1a; select convert(varchar(8…

考察数据结构——第二部分:队列、堆栈和哈希表[译]

相关文档 考察数据结构——第一部分:数据结构简介 考察数据结构——第三部分&#xff1a;二叉树和BSTs 原文链接&#xff1a;Part 2: The Queue, Stack, and Hashtable 本文是"考察数据结构"系列文章的第二部分&#xff0c;考察了三种研究得最多的数据结构&#xff…