10.JavaScript核心BOM操作学习（界面交互功能）——通过JavaScript实现京东放大效果，立即执行函数，元素滚动，通过JavaScript实现回到顶部的操作

最新推荐文章于 2023-02-10 16:42:07 发布

愿时间能学会宽恕

最新推荐文章于 2023-02-10 16:42:07 发布

阅读量233

点赞数

分类专栏：网页前端开发js,vue等知识文章标签： js css html javascript html5

尊重版权，转载需指明

本文链接：https://blog.csdn.net/getture/article/details/108076270

版权

网页前端开发js,vue等知识专栏收录该内容

24 篇文章 0 订阅

订阅专栏

案例：京东放大效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	*{
		padding: 0px;
		margin: 0px;
	}
	.out_line{
		width: 1200px;
		height: 800px;
		margin: 0px auto;
	}
	.main{
		width: 450px;
		height:600px;
		margin:100px 0 0 0 ;
		position: relative;
		background-color: white;
		border: 2px solid black;
		cursor:move;	
	}
	.cover{
		width: 300px;
		height: 300px;
		position: absolute;
		z-index:9999;
		top: 0px;
		left: 0px;
		display: none;
		background-color: rgba(232,176,176,0.5);
	}
	img{
		width: 450px;
		height: 600px;
		position: absolute;
		left: 50%;
		top:50%;
		transform: translate(-50%,-50%);
	}
	.detail{
		position: absolute;
		width: 800px;
		height: 800px;
		left:452px;
		top:-2px;
		background-color: pink;
		display: none;
		background-repeat: no-repeat;
		background: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2455674192,2255975099&fm=26&gp=0.jpg") no-repeat;
		background-size: 1200px 1600px;
</style>
<body> 
	<div class="out_line">
		<div class="main">
			<div class="cover"></div>
			<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2455674192,2255975099&fm=26&gp=0.jpg">
			<div class="detail"></div>
		</div>
	</div>
	<script type="text/javascript">
		var cover=document.querySelector('.cover');
		var main=document.querySelector('.main');
		var out_line=document.querySelector('.out_line');
		var detail=document.querySelector('.detail');
		main.addEventListener('mousedown',function(event){
			move(event);
			cover.style.display='block';
			document.addEventListener('mousemove',move);
			document.addEventListener('mouseup',function(){
				detail.style.display='none';
				cover.style.display='none';
				document.removeEventListener('mousemove',move);
			})
			function move(event){
				var finish_cover_x=event.pageX-main.offsetLeft-150;
				var finish_cover_y=event.pageY-main.offsetTop-150;				
				cover.style.left=finish_cover_x+'px';
				cover.style.top=finish_cover_y+'px';	
				detail.style.backgroundPosition='-'+finish_cover_x*8/3+'px -'+finish_cover_y*8/3+'px';	
				detail.style.display='block';	
				// if(finish_cover_x>300||finish_cover_x<-150||finish_cover_y<-150||finish_cover_y>300){
				// 	detail.style.display='none';
				// }
				if(finish_cover_x<0){
					cover.style.left=0+'px';
					finish_cover_x=0;
				}
				else if(finish_cover_x>150){
					cover.style.left=150+'px';
					finish_cover_x=150;
				}
				if(finish_cover_y<0){
					cover.style.top=0+'px';
					finish_cover_y=0;				
				}
				else if(finish_cover_y>300){
					cover.style.top=300+'px';
					finish_cover_y=300;
				}							
				detail.style.backgroundPosition='-'+finish_cover_x*8/3+'px -'+finish_cover_y*8/3+'px';			
			}

		})		
	</script>
</body>
</html>

②元素可视区client系列

client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息，通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等

Ⅰ.client系列属性

element.clientTop：返回元素上边框的大小
element.clientLeft：返回元素左边框的大小
element.clientWidth：返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight：返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

<style>
	*{
		border:0px;
		padding: 0px;
	}
	div{
		width:200px;
		height:200px;
		background-color:pink;
		/*包含padding，不包含border*/
		padding:20px;
		border:20px solid red;
	}
</style>
<body>
	<div></div>
	<script>
		div=document.querySelector('div')
		console.log(div.clientWidth);
		console.log(div.clientTop);
	</script>
</body>

Ⅱ.案例分析
      立即执行函数(function(){})()
      主要作用：创建一个独立的作用域，不需要调用，立马能够自己执行的函数
      写法：(function(){})()或者(function(){}());

<body>
	<script>
		(function(a){
			console.log('Hello world'+a);
		})('朱泽玉');
		//第二个小括号可以看作是调用函数
		
		(function(x,y){
			console.log(x+y);
		}(15,10));
		//立即执行函数最大的作用就是独立创建了一个作用域，里面所有变量为局部变量，不会冲突
	</script>
<body>

以下开始案例分析

<script>
	(function(window,document){
		//获取的html的根元素
		var docEL=document.documentElement;
		//dpr物理像素比
		var dpr=window.devicePixelRatio||1
		//设置body字体大小
		function setBodyFontSize(){
			//如果页面有body元素，就设置body的字体大小
			if(document.body){
				document.body.style.fontSize=(12+dpr)+'px'
			}
			//如果页面中没有body元素，则等着我们页面的主要的DOM元素加载完毕再去设置body的字体大小
			else {
				document.addEventListener('DOMContendLoaded',setBodyFontSize)
			}
		}
		setBodyFontSize();
		//设置html元素的文字大小
		function setRemUnit(){
			var rem=docEl.clientWidth/10
			docEl.style.fontSize=rem+'px'
		}
		
		setRemUnit()
		//当页面尺寸大小发生变化的时候，要重新设置下rem的大小
				
		window.addEventListener('resize',setRemUnit)
		//pageshow是我们重新加载页面触发的事件
		window.addEventListener('pageshow',function(e){
			//e.persisted返回的是true就是说如果页面是从缓存取过来的页面，也要重新计算以下rem的大小
			if(e.persisted){
				setRemUnit()
			}
		})
		//有些移动端的浏览器不支持0.5像素的写法
		if(fpr>=2){
			var fakeBody=document.createElement('body');
			var testElement=document.createElement('div');
			testElement.style.border='.5px solid transparent'
			fakeBody.appendChild(testElement)
			docEl.appendChild(fakeBody)
			if(testElement.offsetHeight===1){
				docEl.classList.add('hairlines ')
			}
			docEl.removeChild(fakeBody)
		}
	})(window,document);
</script>

③元素滚动scroll系列

scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小，滚动距离等

Ⅰ.scroll常见属性
element.scroll.scrollTop：返回被卷去得上侧距离，返回数值不带单位
element.scroll.scrollLeft：返回被卷去的左侧距离，返回数值不带单位
element.scroll.scrollWidth：返回自身实际的宽度，不含边框，返回数值不带单位
element.scroll.scrollHeight ：返回自身实际的高度，不含边框，返回数值不带单位

如果，是元素被卷去的头部是element.scrollTop，如果是页面被卷去的头部则是window.pageYOffset

Ⅱ.案例：右侧状态栏的实现
原先侧边栏是绝对定位
当页面滚动到一定位置，侧边栏改为固定定位
页面继续滚动，会让“返回顶部”显示出来

里面有基于JS实现回到页面顶部的方法，点击可以跳转查看其他五种写法（从实现到增强）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			width: 1400px;
			margin: 0px auto;
			position: relative;
		}
		*{
			padding: 0px;
			margin: 0px;
		}
		.common{
			margin: 0px auto;
			margin-bottom: 20px;
			width: 1200px;
			height: 600px;
			background-color: pink;
		}
		.first{
			position: relative;
		}
		.right_bar{
			width: 100px;
			height: 200px;
			top:300px;
			right:0px;
			position:absolute;
			background-color: yellow;
		}
		span{
			font-size: 40px;
			cursor: ;
		}
	</style>
</head>

<body>
	<div class="right_bar ">
		<span>Hello world</span>
	</div>
	<div class="first common"></div>
	<div class="common"></div>
	<div class="common"></div>
	<script>
	 	var nav=document.querySelector('.right_bar');
	 	var span=document.querySelector('span');
	 	console.log(nav.offsetTop);
	 	document.addEventListener('scroll',function(){
	 		var Y=window.pageYOffset;
	 		if(window.pageYOffset>300){
	 			console.log(window.pageYOffset-300);
	 			nav.style.top=window.pageYOffset+'px';
	 			span.innerText="上面";
	 			span.style.cursor="pointer"

	 			//点击回到最上方
	 			span.addEventListener('click',function(){
					//方法1：window.sroll(0,100);
	 				//方法2：
	 				document.documentElement.scrollTop=0;
	 			})
	 		}
	 		else{
	 			nav.style.top=300+'px';
	 			span.innerText="Hello world"
	 			span.style.cursor=""
	 		}
	 	})
	</script>
<body>
</html>

Ⅲ.mouseenter和mouseover的区别
mouseenter事件

当鼠标移动到元素上就会触发mouseenter事件
类似于mouseover，两者的差别是
mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发
因为mouseenter不能冒泡
搭配使用的离开方式：mouseleave
Ⅱ.示范：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.father{
			width: 400px;
			height: 400px;
			background-color: pink;
			margin-top: 20px;
		}
		.son{
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>

<body>
	<div id="div_1" class="father">
		mouseover
		<div  class="son"></div>
	</div>

	<div id="div_2" class="father">
		mouseenter
		<div  class="son"></div>
	</div>
	<script type="text/javascript">
		var div1=document.querySelector('#div_1');
		var div2=document.querySelector('#div_2');

		div1.addEventListener('mouseover',function(){
			console.log('一次');
		})
		div2.addEventListener('mouseenter',function(){
			console.log('一次');
		})
	</script>
<body>
</html>

愿时间能学会宽恕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10.JavaScript核心BOM操作学习（界面交互功能）——通过JavaScript实现京东放大效果，立即执行函数，元素滚动，通过JavaScript实现回到顶部的操作

案例：京东放大效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> *{ padding: 0px; margin: 0px; } .out_line{ width: 1200px; height: 800px; margin:
复制链接

扫一扫