HTML放大镜实现

时间：2025-03-23 20:15:09

        前天跟着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/');
		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/');
		background-size:466%;
		
	}
	.itemarea .list .current{
		border:2px red solid;	
	}
</style>
</head>

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

相关文章