HTML放大镜实现

最新推荐文章于 2024-07-12 21:49:18 发布

Sonny船长

最新推荐文章于 2024-07-12 21:49:18 发布

阅读量4.4k

点赞数

分类专栏：网站相关文章标签： HTML

本文链接：https://blog.csdn.net/Tony6666_/article/details/85149153

版权

网站相关专栏收录该内容

20 篇文章 0 订阅

订阅专栏

前天跟着b站的一个老师敲了大概两个小时左右，老师一直说很简单，但是实现的步骤对于接触js时间不太长，或者说连皮毛都不是特别懂的我来说，还是需要多多学习。模板是这个样子，其中参数需要根据添加图片的不同设置不同值，根据自己所需要的页面展示风格，也需要改动相应的margin、position参数，总的来说就是实现三个框架：原图片框、随鼠标移动的半透明矩形框、Details展示框。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片放大镜</title>
<style>
	body{
		background-color:#d8e7fa;
	}
	ul{
		margin:0;
		padding:0;
		list-style:none;	
	}
	.itemarea{
		position:relative;
		height:800px;
		width:400px;
		border:1px#888 solid;
		margin:20px auto;
		}
	.itemarea .pic img{
		width:400px;
		height:711px;	
	}
	.itemarea .pic .cover{
		background-image:url('images/move.png');
		opacity:50%;
		width:150px;
		height:150px;
		position:absolute;
		left:0;
		top:0;	
	}
	.itemarea .list img{
		width:35px;
		height:60px;
		display:block;	
	}
	.itemarea .list{
		display:flex;	
	}
	.itemarea .list li{
		margin:auto;	
	}
	.itemarea .pic{
		margin-bottom:5px;	
	}
	.itemarea .detail{
		position:absolute;
		display：:block;
		top:0;
		left:400px;
		height:711px;
		width:400px;
		border:1px#888 solid;
		background-image:url('images/1.jpg');
		background-size:466%;
		
	}
	.itemarea .list .current{
		border:2px red solid;	
	}
</style>
</head>

<body>
	<div class = 'itemarea'>
    	<div class = 'pic'>
        	<img src = "images/1.jpg" alt = "">
            <div class = "cover">
            	
            </div>
    	</div>
        	<ul class = 'list'>
            	<li>
                	<img  class = 'current' src = "images/1.jpg" alt = "">
                </li>
                <li>
                	<img src = "images/2.jpg" alt = "">
                </li>
                <li>
                	<img src = "images/3.jpg" alt = "">
                </li>
                <li>
                	<img src = "images/4.jpg" alt = "">
                </li>
                <li>
                	<img src = "images/5.jpg" alt = "">
                </li>
                <li>
                	<img src = "images/6.jpg" alt = "">
                </li>
            </ul>
     <div class = "detail"></div>
    </div>
    <script>
    /*  1.需求分析：鼠标放到某张图片上去的时候动态修改图片地址
		2.鼠标放到大图的时候，动态修改右边图片位置
			1.2.1显示一个区域 用于确认鼠标放上去的位置
			1.2.2显示右边区域用于放大图片的展示效果
					window/documentaq
			
		
	    */
		/*图片切换实现   list*/
		var list = document.querySelector('.list');
			imgs = list.querySelectorAll('img');
			img = document.querySelector('.pic img');
			pic = document.querySelector('.itemarea .pic');
			cover = document.querySelector('.cover');
			detail = document.querySelector('.detail');
		list.addEventListener('mousemove',function(e){
			if(e.target.tagName=='IMG')/*置空边框*/
			{
				img.src = e.target.src;
				detail.style.backgroundImage = 'url('+e.target.src+')';
				imgs.forEach(function(item){
					item.className = '';	
				})
				e.target.className = 'current';
			}
		})
		pic.addEventListener('mousemove',function(e){
			var x = e.clientX,y = e.clientY;
			cx = pic.getBoundingClientRect().left,
			cy = pic.getBoundingClientRect().top;
			tx = x-cx-75,ty = y-cy-75;
			//console.log(e.clientX,e.clientY);
			//console.log(cx,cy);/*获取页面当中元素位置*/
			if(tx<0){
					tx = 0;
			}
			if(ty<0){
					ty = 0;	
			}
			if(tx>250){
					tx = 250;	
			}
			if(ty>561){
					ty = 561;	
			}
			detail.style.backgroundPosition = tx/250*100+'%'+ty/561*100+'%';
			cover.style.left =tx+'px';
			cover.style.top = ty+'px';
		})
		
		/*for(var i = 0;i<list.length;i++)
		{
			list[i].onmouseover = (function(j){
				console.log(list[j],i);
			})(i)
		}*/
		/*图片：1920*1080   展示框：600*400   小框：150*150  */
    </script>
</body>
</html>