js制作图片放大效果，查看高清图片

最新推荐文章于 2022-09-30 20:17:59 发布

芒果大胖砸

最新推荐文章于 2022-09-30 20:17:59 发布

阅读量288

点赞数

分类专栏： js IT

本文链接：https://blog.csdn.net/w161513820/article/details/103074618

版权

js 同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

style样式代码

<style type="text/css">
			.box{
				width: 400px;
				height: 500px;
				border: 1px solid salmon;
				margin: 0 auto;
				position: relative;
			}
			.box div:nth-of-type(2){
				width: 200px;
				height: 200px;
				position: absolute;
				top: 0;
				left: 0;
				background: rgba(255,255,255,0.4);
			}
			.box>img{
				width: 100%;
				height: 100%;
				vertical-align: top;
			}
			.fang{
				width: 400px;
				height: 400px;
				position: absolute;
				top: 0;
				right: -403px;
				overflow: hidden;
				border: 1px solid black;
				display: none;
			}
			.fang>img{
				width: 200%;
				height: 200%;
				position: absolute;
			}
		</style>

body内容

<body>
		<div class="box">
			<img src="img/20181217032935545.png" >
			<div class="fang">
				<img src="img/20181217032935545.png" >
			</div>
		</div>
</body>

js代码

<script type="text/javascript">
			var box=document.querySelector('.box')
			var fang=document.querySelector('.fang');
			var Img=document.querySelector('.fang img');
			console.log(Img)
			box.onmouseenter=function(ev){
				fang.style.display='block';
				ev =ev || window.event
				var div=document.createElement('div');//创建一个叫div的元素标签
				box.appendChild(div);//插入创建的标签
				box.addEventListener('mouseleave',function(){//绑定事件
					div.remove();
				})
				var divx=ev.pageX - this.offsetLeft - div.offsetWidth/2;//创建的这个div的x就等于鼠标的坐标减去box的left,再减去创建的div的一半,重新让它的中心点变到左上角
				var divy=ev.pageY - this.offsetTop - div.offsetHeight/2;
				
				var mixL=box.offsetWidth -div.offsetWidth;
				var mixT=box.offsetHeight -div.offsetHeight;
				if(divy>=mixT){
					divy=mixT
				}else if(divy<0){
					divy=0;
				}
				if(divx>=mixL){
					divx=mixL
				}else if(divx<0){
					divx=0;
				}
				div.style.top=divy + 'px';
				div.style.left=divx + 'px';
				box.onmousemove=function(ev){
					ev =ev || window.event;
					var dix=ev.pageX - this.offsetLeft -div.offsetWidth/2;
					var diy=ev.pageY - this.offsetTop - div.offsetHeight/2;
					if(dix>mixL){
						dix=mixL;
					}else if(dix<0){
						dix=0
					}
					if(diy>=mixT){
						diy=mixT
					}else if(diy<0){
						diy=0;
					}
					div.style.top=diy + 'px';
					div.style.left=dix + 'px';
					
					var rl=dix/mixL;
					var tp=diy/mixT;
					
					var Himg=Img.offsetHeight - box.offsetHeight;
					var Wimg=Img.offsetWidth -box.offsetWidth;
					// console.log(Wimg)
					Img.style.top=-tp*Himg +'px';
					Img.style.left=-rl*Wimg +'px';
					// console.log(rl,tp)
				}
			}
			box.onmouseleave=function(){
				fang.style.display='none'
			}
		</script>

芒果大胖砸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js制作图片放大效果，查看高清图片

style样式代码<style type="text/css"> .box{ width: 400px; height: 500px; border: 1px solid salmon; margin: 0 auto; position: relative; } .box div:nth-of-type(2){ wid...
复制链接

扫一扫