JS缓动动画相关

最新推荐文章于 2023-01-06 10:16:05 发布

可乐爆米花

最新推荐文章于 2023-01-06 10:16:05 发布

阅读量486

点赞数

分类专栏： JavaScript 前端端端端端端

本文链接：https://blog.csdn.net/william_jzy/article/details/80094639

版权

前端端端端端端同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

JavaScript

20 篇文章 0 订阅

订阅专栏

封装一个JS文件animate.js


//缓动动画
function animate(obj , target) {
	//关闭定时器
	clearInterval(obj.timer);
	console.log("2222");
	obj.timer = setInterval(function(){
		//速度是距离的1/10
		var speed = (target - obj.offsetTop)/10;
		console.log(speed);
		//正值向右移动且向上取整
		speed = speed>0?Math.ceil(speed):Math.floor(speed);
		//console.log(speed);
		//广告上下移动
		obj.style.top = obj.offsetTop + speed + "px";
		//判断是否到达目标位置
		if(Math.abs(target - obj.offsetTop) < Math.abs(speed)){
			obj.style.top = target + "px";
			clearInterval(obj.timer);
		}
	},30);
};


//封装一个兼容的scroll().返回值是json，用scroll().top获取scrollTop，
//scroll().left获取scrollLeft

function scroll(){
	if(window.pageYOffset != null){ //ie9+ 
		//因为pageXOffset默认是0，所以需要进行判断
		return{
			left : window.pageXOffset,
			top : window.pageYOffset
		}
	}
	else if(document.compatMode === "CSS1Compat"){
		//标准浏览器，判断有没有声明DTD
		return {
			left : document.documentElement.scrollLeft,
			top : document.documentElement.scrollTop
		}
	}
	else{
		return {
			left : document.body.scrollLeft,
			top : document.body.scrollTop
		}
	}
};

##两侧广告
两侧广告会跟随界面的移动而移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 400px;
				height: 2000px;
				margin: 0 auto;
			}
			.img1{
				position: absolute;
				top: 80px;
				left: 10px;
			}
			.img2{
				position: absolute;
				top: 80px;
				right: 10px;
			}
		</style>
		<script type="text/javascript" src="js/animate.js"></script>
		
		<script type="text/javascript">
			window.onload = function(){
				var img = document.getElementsByTagName("img");
				
				window.onscroll = function(){
					//获取被卷去的高度
					var val = scroll().top;
					console.log(val);
					//console.log("1111111");
					animate(img[0],val+80);
					animate(img[1],val+80);
				};
			};
		</script>
	</head>
	<body>
		<img class="img1" src="img/side.png"/>
		<img class="img2" src="img/side.png"/>
		<div>
			阿斯蒂芬规划局快乐了；‘<br />
			阿斯蒂芬规划局快乐了；‘<br />
			阿斯蒂芬规划局快乐了；‘<br />
			。。。。。。
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				position: fixed;
				right: 10px;
				bottom: 10px;
				display: none;
				cursor: pointer;
			}
			div{
				width: 300px;
				height: 2000px;
				margin: 20px auto;
			}
		</style>
		<script type="text/javascript" src="js/animate.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				var img = document.getElementsByTagName("img")[0];
				
				window.onscroll = function(){
					//卷去距离大于300显示小火箭
					if(scroll().top > 200){
						img.style.display = "block";
					}else{
						img.style.display = "none";
					}
					leader = scroll().top;
				}
				//目标位置是顶部 (0,0)点
				var target = 0;
				//显示区域距离顶部的距离（显示区域位置
				var leader = 0;
				var timer;
				
				img.onclick = function(){
					clearInterval(timer);
					timer = setInterval(function(){
						//速度
						var speed = (target - leader)/10;
						speed = speed>0?Math.ceil(speed):Math.floor(speed);
						leader += speed;
						console.log(leader);
						window.scrollTo(0,leader);
						//window.scrollTo(0,0);  //这样会没有缓动的效果
	                    //清除定时器
	                    if(leader === 0){
	                        clearInterval(timer);
	                    }
					},30);
				};
			};
			
		</script>
		
	</head>
	<body>
		<img src="img/xiu.png"/>
		<div>
			我是最顶端.....<br>
			阿斯蒂芬规划局快乐了；‘<br />
			阿斯蒂芬规划局快乐了；‘<br />
			阿斯蒂芬规划局快乐了；‘<br />
			阿斯蒂芬规划局快乐了；‘<br />
			阿斯蒂芬规划局快乐了；‘<br />
			阿斯蒂芬规划局快乐了；‘<br />
			阿斯蒂芬规划局快乐了；‘<br />
    	</div>
	</body>
</html>

##楼层跳跃
点击，跳转到相对应的部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body,html{
				height: 100%;
			}
			ul{
				list-style: none;
				height: 100%;
			}
			ul li{
				height: 100%;
			}
			ol{
				list-style: none;
				position: fixed;
				left: 30px;
				top: 100px;
			}
			ol li{
				width: 60px;
				height: 30px;
				border: solid 1px #000;
				line-height: 30px;
				text-align: center;
				cursor: pointer;
			}
		</style>
		<script type="text/javascript" src="js/animate.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				//获取元素
				var ul = document.getElementsByTagName("ul")[0];
				var ol = document.getElementsByTagName("ol")[0];
				var ulLiArr = ul.children;
				var olLiArr = ol.children;
				var target = 0; 
				var leader = 0;
				var timer = null;
				//给每个区域上色
				var colorArr = ["pink" , "orange" , "skyblue" , "red" , "yellow"];
				for(var i = 0 ;i<colorArr.length ; i++){
					ulLiArr[i].style.backgroundColor = colorArr[i];
					olLiArr[i].style.backgroundColor = colorArr[i];
					
					olLiArr[i].index = i;
					//循环绑定单击响应函数
					olLiArr[i].onclick = function(){
						//获取当前li的索引 得到它距离最顶端的距离
						target = ulLiArr[this.index].offsetTop;
						//清除定时器
						clearInterval(timer);
						timer = setInterval(function(){
							//跳到对应位置
							var speed = (target - leader)/10;
							speed = speed>0?Math.ceil(speed):Math.floor(speed);
							//滑动
							leader += speed;
							window.scrollTo( 0 , leader);
							//清除定时器
							if(Math.abs(target - leader) < Math.abs(speed)){
								window.scrollTo(0,target);
								clearInterval(timer);
							}
						},25);
					};
				}
				
				window.onscroll = function(){
					leader = scroll().top;
				}
				
			};
		</script>
	</head>
	<body>
		<ul>
			<li>上衣区域</li>
			<li>裤子区域</li>
			<li>鞋子区域</li>
			<li>袜子区域</li>
			<li>帽子区域</li>
		</ul>
		<ol>
			<li>上衣</li>
			<li>裤子</li>
			<li>鞋子</li>
			<li>袜子</li>
			<li>帽子</li>
		</ol>
	</body>
</html>

可乐爆米花

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS缓动动画相关

封装一个JS文件animate.js//缓动动画function animate(obj , target) { //关闭定时器 clearInterval(obj.timer); console.log(&quot;2222&quot;); obj.timer = setInterval(function(){ //速度是距离的1/10 var...
复制链接

扫一扫