原生js开发动画库（二）

最新推荐文章于 2024-05-06 11:47:15 发布

℡52Hz★

最新推荐文章于 2024-05-06 11:47:15 发布

阅读量69

点赞数

分类专栏： JavaScript类文章标签： javascript 开发语言 ecmascript html css 前端

本文链接：https://blog.csdn.net/qq_53541336/article/details/132801426

版权

JavaScript类专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、联动效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>联动效果</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#ad{
				position: fixed;
				right: 0;
				bottom: 0;
			}
			img{
				width: 280px;
				height: 400px;
			}
			#close{
				position: absolute;
				right: 0;
				top: 0;
				width: 25px;
				height: 25px;
				z-index: 5;
			}
		</style>
	</head>
	<body>
		<div id="ad">
			<img src="images/pic.jpeg" >
			<span id="close">
				<svg t="1694397834822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4001" width="32" height="32">
					<path d="M836.827 317.364c-34.279-58.45-79.65-103.817-138.102-138.1-57.8-33.9-120.62-50.692-188.798-50.692s-131.222 16.41-189.672 50.692c-57.8 33.9-102.949 79.65-137.229 138.1-33.897 57.805-50.695 120.626-50.695 188.8 0 68.182 16.417 131.218 50.695 189.676 33.898 57.796 79.429 103.322 137.229 137.223 58.451 34.283 121.495 50.701 189.672 50.701s130.998-16.8 188.798-50.7c58.451-34.283 104.204-79.428 138.102-137.224 34.28-58.458 50.697-121.494 50.697-189.677 0-68.173-16.799-130.994-50.697-188.8z m-144.22 326.032l-46.325 45.452-136.354-137.233-136.354 137.233-46.325-45.452 137.229-137.233-137.229-136.355 45.451-46.32 137.228 137.224L646.28 323.489l46.325 46.319-137.228 136.355 137.23 137.233z m264.844 120.618" fill="#333333" p-id="4002">
					</path>
				</svg>
			</span>
		</div>
		<script src="js/app1.js"></script>
		<script>
			var ad=document.getElementById('ad');
			var close=document.getElementById('close')
			close.onclick=function(){
				startAnimation(ad,{'height':260},function(){
					startAnimation(ad,{'width':0},function(){
						ad.style.display='none'
					})
				})
			}
		</script>
	</body>
</html>

app1封装的动画库

var speed=0;
function startAnimation(obj,json,fn){
	clearInterval(obj.timer);
	obj.timer=setInterval(()=>{
		var cur=0;
		var flag=true;//标杆
		for(var attr in json){
			//透明度变化处理
			if(attr==='opacity'){
				cur=Math.round(parseFloat(getStyle(obj,attr))*100)//转化成浮点型
			}else{
				cur=parseInt(getStyle(obj,attr));//获取样式变量
			}
			//求速度
			speed=(json[attr]-cur)/20;
			speed=json[attr]>cur?Math.ceil(speed):Math.floor(speed)
			//处理临界问题
			if(json[attr]!==cur){
				flag=false
			}
			if(attr==='opacity'){
				obj.style[attr]=`alpha(opacity:${cur+speed})`;
				obj.style[attr]=(cur+speed)/100;
			}else{
				obj.style[attr]=cur+speed+'px'
			}
		}
		if(flag){
			clearInterval(obj.timer)
			if(fn){
				fn();
			}
			return
		}
		
	},30)
}
function getStyle(obj,attr){
	if(obj.currentStyle){
		//兼容ie
		return obj.currentStyle[attr]
	}else{
		//兼容主流浏览器
		return getComputedStyle(obj,null)[attr]
	}
}

二、侧边栏动画特效

app1的js代码详情见上方，这里就不在重复写了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>侧边栏横幅</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#aside{
				position: absolute;
				top: 200px;
				left: 0;
				width: 300px;
				/* height: 400px; */
			}
			img{
				width: 280px;
			}
		</style>
	</head>
	<body style="height: 5000px;">
		<div id="aside">
			<img src="images/pic.jpeg" >
		</div>
		<script src="js/app1.js"></script>
		<script>
			window.onload=()=>{
				var aside=document.getElementById('aside')
				//获取广告偏移量
				var aside_top=aside.offsetTop;
				window.onscroll=()=>{
					//获取页面滚动的高度
					var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
					startAnimation(aside,{'top':scrollTop+aside_top})
				}
			}
		</script>
	</body>
</html>

三、滚动监听动画

下面事宜淘宝官网为例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滚动监听</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			ul,li{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			.container{
				width: 1190px;
				height: 100%;
				margin: 0 auto;
			}
			.container div{
				width: 100%;
				height: 100%;
				text-align: center;
				color: #fff;
				font-size: 30px;
			}
			.aside{
				width: 40px;
				position: fixed;
				right: 10px;
				top: 300px;
				font-size: 16px;
				font-weight: 700;
				text-align: center;
			}
			.aside li{
				height: 50px;
				border-bottom: 1px solid #ddd;
			}
			.aside li a{
				color: peru;
			}
			.aside li.current{
				background: coral;
			}
			.aside li.current a{
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="container" id="box">
			<div class="current">爱逛好货</div>
			<div>好店主播</div>
			<div>品质特色</div>
			<div>猜你喜欢</div>
		</div>
		<ul class="aside" id="aside">
			<li class="current">
				<a href="javaScript:void(0)">爱逛好货</a>
			</li>
			<li>
				<a href="javaScript:void(0)">好店主播</a>
			</li>
			<li>
				<a href="javaScript:void(0)">品质特色</a>
			</li>
			<li>
				<a href="javaScript:void(0)">猜你喜欢</a>
			</li>
		</ul>
		<script src="js/app2.js"></script>
		<script>
			window.onload=function(){
				//获取标签
				var box=document.getElementById('box');
				var allBoxs=box.children;//获取box的所有子元素
				var aside=document.getElementById('aside');
				var lis=aside.children;//获取aside的所有子元素
				var isClick=false;//默认没有被点击
				//为盒子上色
				var colors=['orange','green','blue','purple']
				for(var i=0;i<allBoxs.length;i++){
					allBoxs[i].style.backgroundColor=colors[i];
				}
				//监听侧边栏按钮的点击
				for(var j=0;j<lis.length;j++){
					lis[j].index=j;
					lis[j].onclick=function(){
						isClick=true
						for(var k=0;k<lis.length;k++){
							lis[k].className='';
						}
						this.className='current';//设置当前的类
						// document.documentElement.scrollTop=this.index*document.body.clientHeight;//第一种方式
						//第二种方式让页面动画起来
						startAnimation(document.documentElement,{
							"scrollTop":this.index * document.body.clientHeight
						},function(){
							isClick=false
						})
					}
				}
				//监听页面滚动
				window.onscroll=function(){
					if(!isClick){
						//获取页面滚动的高度
						var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
						for(var i=0;i<lis.length;i++){
							if(scrollTop>allBoxs[i].offsetTop){
								for(var j=0;j<allBoxs.length;j++){
									lis[j].className='';
								}
								lis[i].className='current';
							}
						}
					}
				}
			}
		</script>
	</body>
</html>

app2中的代码

var speed=0;
function startAnimation(obj,json,fn){
	clearInterval(obj.timer);
	obj.timer=setInterval(()=>{
		var cur=0;
		var flag=true;//标杆
		for(var attr in json){
			//透明度变化处理
			switch(attr){
				case 'opacity':
					cur=Math.round(parseFloat(getStyle(obj,attr))*100)//转化成浮点型
				break;
				case 'scrollTop':
					cur=obj[attr]
				break;
				default:
					cur=parseInt(getStyle(obj,attr));//获取样式变量
				break;
			}
			//求速度
			speed=(json[attr]-cur)/20;
			speed=json[attr]>cur?Math.ceil(speed):Math.floor(speed)
			//处理临界问题
			if(json[attr]!==cur){
				flag=false
			}
			switch(attr){
				case 'opacity':
					obj.style[attr]=`alpha(opacity:${cur+speed})`;
					obj.style[attr]=(cur+speed)/100;
				break;
				case 'scrollTop':
					obj.scrollTop=cur+speed;
				break;
				default:
					obj.style[attr]=cur+speed+'px'
				break;
			}
		}
		if(flag){
			clearInterval(obj.timer)
			if(fn){
				fn();
			}
			return
		}
		
	},30)
}
function getStyle(obj,attr){
	if(obj.currentStyle){
		//兼容ie
		return obj.currentStyle[attr]
	}else{
		//兼容主流浏览器
		return getComputedStyle(obj,null)[attr]
	}
}