图片显示效果

我是你家后院的花栗鼠啊

已于 2022-04-04 11:46:26 修改

阅读量164

点赞数

分类专栏：前端文章标签： html

于 2020-05-23 14:43:58 首次发布

本文链接：https://blog.csdn.net/qq_40552337/article/details/106300066

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.实现页面突出功能

<!DOCTYPE html>
<html>
<head>   
 <meta charset="UTF-8" />    
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />    
 <title>        How to Zoom an Image on        Mouse Hover using CSS?    </title>
 </head>
 <style> 
    .geeks { 
        width: 300px; 
        height: 300px; 
        overflow: hidden; 
        margin: 0 auto; 
    }

    .geeks img { 
        width: 100%; 
        transition: 0.5s all ease-in-out; 
    }

    .geeks:hover img { 
        transform: scale(1.5); 
    } 
</style>
 <body>    
 <div class="geeks">        
 <img src="https://img13.360buyimg.com/n0/jfs/t26185/79/269912029/281123/31d8ae3/5b8bf0baNcc18eb94.jpg" alt="Geeks Image" />    
 </div>
 </body>
 </html>

2.实现放大镜功能

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*整个div中只放置小显示区域即可，大显示区域隐藏，这样直接对zoom设置属性就行了*/
		.zoom{
			width: 200px;
			height: 200px;
			margin-left: 100px;
			margin-top: 100px;
			/*margin-top: 1000px;  测试有滚动条情况下反应*/
			position: relative;
			border: solid 1px #000;
		}
		.big_area{
			/*大显示区域宽高可直接改变*/
			width: 400px;
			height: 400px;
			position: absolute;
			left: -10000px;
			top: -1px;
			border: solid 1px #000;
			overflow: hidden;
		}
		.big_area img{
			position: absolute;
			left: 0;
			top: 0;
		}
		/*遮罩层*/
		.mask{
			position: absolute;
			left: -10000px;
			top: 0;
			width: 100px;
			height: 100px;
			background: #000;
			opacity:0.65;
			filter:alpha(opacity=65);
		}
	</style>
</head>
<body>
	<div class="zoom">
		<div class="small_area">
			<img src="https://img13.360buyimg.com/n0/jfs/t26185/79/269912029/281123/31d8ae3/5b8bf0baNcc18eb94.jpg" width="200" height="200" />
			<span class="mask"></span>
		</div>
		<div class="big_area">
			<img src="https://img13.360buyimg.com/n0/jfs/t26185/79/269912029/281123/31d8ae3/5b8bf0baNcc18eb94.jpg" width="620" height="620">
		</div>
	</div>
 
	<script>
		
		// 获取相应节点元素
		var zoom = document.querySelector('.zoom');
		var simg = document.querySelector('.small_area img');
		var bimg = document.querySelector('.big_area img');
		var big = document.querySelector('.big_area');
		var small = document.querySelector('.small_area');
		var mask = document.querySelector('.mask');
 
		// 设置遮罩层宽高  小图宽 除以 大图宽 乘以 大显示区域边框
		mask.style.width = (simg.offsetWidth/bimg.offsetWidth)*big.clientWidth+"px";
		mask.style.height = (simg.offsetHeight/bimg.offsetHeight)*big.clientHeight+"px";
 
		// 定义遮罩层最大边距，也就是最大移动距离
		var maxW = simg.clientWidth - mask.offsetWidth;
		var maxH = simg.clientHeight - mask.offsetHeight;
 
		// 鼠标移入小显示区域发生事件：1.遮罩层显示 2.大显示区域显示
		small.onmouseenter=function(){
			mask.style.left = 0;
			big.style.left = 210+"px";
		}
		// 鼠标移入小显示区域发生事件：1.遮罩层消失 2.大显示区域消失
		small.onmouseleave=function(){
			mask.style.left = -10000+"px";
			big.style.left = -10000+"px";
		}
		// 鼠标在小显示区域移动
		small.onmousemove=function(e){
			// 解决兼容问题
			e = e || window.event;
			// 定义两个变量 让鼠标位置一直处于遮罩层位置中间
			var nLeft = e.pageX-zoom.offsetLeft-zoom.clientLeft-mask.offsetWidth/2;
			var nTop = e.pageY-zoom.offsetTop-zoom.clientTop-mask.offsetHeight/2;
 
			// 设置遮罩层永远显示在小显示区域内部 也就是判断nLeft、nTop值
			nLeft = Math.min(maxW,Math.max(0,nLeft));
			nTop = Math.min(maxH,Math.max(0,nTop));
 
			// 遮罩层位置
			mask.style.left = nLeft+"px";
			mask.style.top = nTop+"px";
 
			// 设置大图片移动位置 跟随遮罩层百分比移动（语法带入）
			bimg.style.left = -(bimg.offsetWidth-big.clientWidth)*(nLeft/(simg.clientWidth-mask.offsetWidth))+"px";		
			bimg.style.top = -(bimg.offsetHeight-big.clientHeight)*(nTop/(simg.clientHeight-mask.offsetHeight))+"px";			
 
 
		}
	</script>
 
</body>
</html>

我是你家后院的花栗鼠啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片显示效果

1.实现页面突出功能<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title> How to Zoom an Image on Mouse Hover using C
复制链接

扫一扫