东坡肉不懂的地方

qq_45370222

已于 2022-10-22 14:32:07 修改

阅读量116

点赞数

分类专栏： JavaScript 文章标签： javascript 动画 css3

于 2022-10-21 20:51:27 首次发布

本文链接：https://blog.csdn.net/qq_45370222/article/details/127442025

版权

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

东坡肉肉不懂的地方

innHTML 这个属性在JS中不用加style；
写的时候要将 html和body的高度设置为100%；
还要加视口
如果要改变一个节点的属性这样改就可以

p3_huan.src = "img/P3葱姜t.png"

添加阴影的阴影

//                   x的偏移量 y  模糊度  扩展度 颜色      内阴影（不加就是外阴影）
.right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) inset}

权威边框阴影教程

遇到的问题加深的框P3


这个是背景
background: url(../img/P1bg.png) 0 0/100%  no-repeat;

写JS代码的时候一定要加
// 先执行CSS代码再执行JS代码  不这个样可以能有报错
window onload = function() {
}

// 视口是这个
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />


// 透明度  opacity  1表示不透明， 0 表示完全透明

音乐 、 字体

audio 音频

//音频动画开始开始
audio.play(); //开始音频
yinyue.style.animationPlayState = "running";  // 开始动画

// 音频和动画暂停
audio.pause(); //暂停音频
yinyue.style.animationPlayState = "paused";  //  暂停动画


//  动画停止 和 动画开始
animation-play-state: paused|running;

//  动画基本操作 动画名字 多长时间 线性  一直（无限） 暂停
animation: zhuang360 1s linear infinite paused;

翻页

翻页的源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			html,body {
				height: 100%;
				overflow: hidden;
			}
			div {
				height: 100%;
			}
			.outer2{
				display: none;
				/* display: block; */
			}
			.outer3 {
				display: none;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="outer1">
				第一页
			</div>
			<div class="outer2">
				第二页
			</div>
			<div class="outer3">
				第三页
			</div>
		</div>
		
		<script type="text/javascript">
			let outer1 = document.getElementsByClassName('outer1')[0];
			let outer2 = document.getElementsByClassName('outer2')[0];
			let outer3 = document.getElementsByClassName('outer3')[0];
			
			var start = 0,end = 0,move = 0;
			
			outer1.addEventListener('touchstart',function(){
				start = parseInt(event.targetTouches[0].clientY);
				console.log(start,"按下点")
			});
			
			outer1.addEventListener('touchend',function(){
				end = parseInt(event.changedTouches[0].clientY);
				console.log(end,"抬起点");
				
				move = start - end;
				
				console.log(move,"移动数值")
				if(move > 150){
					outer1.style.display = "none";
					outer2.style.display = "block";
				}
			});
			
			outer2.addEventListener('touchstart',function(){
				start = parseInt(event.targetTouches[0].clientY);
				console.log(start,"按下点")
			});
			
			outer2.addEventListener('touchend',function(){
				end = parseInt(event.changedTouches[0].clientY);
				console.log(end,"抬起点");
				move = start - end;
				console.log(move,"移动数值")
				if(move < -100){
					outer1.style.display = "block";
					outer2.style.display = "none";
				}
				
				if(move > 100){
					outer2.style.display = "none";
					outer3.style.display = "block";
				}
			});
			
			outer3.addEventListener('touchstart',function(){
				start = parseInt(event.targetTouches[0].clientY);
				console.log(start,"按下点")
			});
			
			outer3.addEventListener('touchend',function(){
				end = parseInt(event.changedTouches[0].clientY);
				console.log(end,"抬起点");
				move = start - end;
				console.log(move,"移动数值")
				if(move < -150){
					outer3.style.display = "none";
					outer2.style.display = "block";
				}
				
				// if(move > 150){
				// 	outer2.style.display = "none";
				// 	outer3.style.display = "block";
				// }
			});
		</script>
	</body>
</html>

核心代码

window.onload = function() {
	var outer1 = document.querySelector(".outer1");
	var outer2 = document.querySelector(".outer2");
	var outer3 = document.querySelector(".outer3");
	var outer4 = document.querySelector(".outer4");
	
	var start = 0, end = 0, move = 0;
	
	
	outer1.addEventListener('touchstart', function() {
		start = parseInt(event.targetTouches[0].clientY);
	});
	
	outer1.addEventListener('touchend', function() {
		end = parseInt(event.changedTouches[0].clientY)
		
		// 计算两个之间的距离
		move = start - end;
		console.log(move);
		
		if (move > 150) {
			outer1.style.display = "none";
		}
		if (move < -150) {
			outer1.style.display = "none";
		}
		
	})
}