图片放大镜效果实战总结

abstract：本次实战主要完成了图片放大镜的效果，通过定义原始图片，放大镜，放大后的图片，然后设置放大后的图片为原始图片的3倍，通过鼠标移上显示放大后的图片，并通过位移计算当前放大镜的位置，设置放大后图片的偏移量，来显示放大后的图片效果。代码如下：<!DOCTYPE html> <html> <head> <me

本次实战主要完成了图片放大镜的效果，通过定义原始图片，放大镜，放大后的图片，然后设置放大后的图片为原始图片的3倍，通过鼠标移上显示放大后的图片，并通过位移计算当前放大镜的位置，设置放大后图片的偏移量，来显示放大后的图片效果。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片放大镜效果</title> 
        <link rel="stylesheet" href="static/css/zuoye.css" type="text/css">
        <script type="text/javascript" src="static/js/jquery.js"></script> 
        <script type="text/javascript">
        	$(function() {
	        	$('#big').hide();//默认隐藏放大后的图片

	        	// ----------------鼠标移上原始图片开始
	        	
	        	$('#normal').mouseover(function(){    //鼠标移上原始图片时
	        		$('#show,#big').show();//鼠标移上时，显示两张图片
	        		$(this).mousemove(function(curMove){
	        			//实时计算原始图片上小方块的移动距离，鼠标位于小方块的中间位置
	               		$('#show').css({
	               			'left':curMove.pageX-$('#show').width()/2,
	               			'top':curMove.pageY-$('#show').height()/2

	               		})
	            	})


	        		//鼠标在原始图片上的移动事件
	        		$('#normal').mousemove(function(e){
	        			//获取鼠标当前位置
	        			let [curX,curY]=[e.clientx,e.clienty];
	        			//获取原图窗口距离文档的偏移位置
	        			let [docX,docY]=[$('#normal').offset().left,$('#normal').offset().top];
	        			//计算鼠标的相对位置
	        			let [relativeX,relativeY]=[curX-docX,curY-docY];
	        			//放大镜的宽高
	        			let [showWidth,showHeight]=[$('#show').width()/2,$('#show').height()/2];
	        			//鼠标移动时，设置放大镜的位置
	        			$('#show').css({left:`${relativeX}-${showWidth}px`,top:`${relativeY}-${showHeight}px`});

	        			//控制放大镜只能在原图窗口内移动，不能越界
	        			//获取当前放大镜的偏移位置
	        			let [curPYWidth,curPYHeight]=[$('#show').position().left,$('#show').position().top];

	        			//获取最大的框高，用于定义边界
	        			let [maxWidth,maxHeight]=[$('#normal').width()-$('#show').width(),$('#normal').height()-$('#show').height()];
	        			
	        			//越界时重新调整放大镜的位置
	        			if(curPYWidth<=0){$('#show').css('left','0px')}
                        
	        			if(curPYWidth>=maxWidth){$('#show').css('left',`${maxWidth}px`)}
	        			
	        			if(curPYHeight<=0){$('#show').css('top','0px')}
                        
	        			if(curPYHeight>=maxHeight){$('#show').css('top',`${maxHeight}px`)}

                       //重新获取放大镜的偏移位置
	        			[curPYWidth,curPYHeight]=[$('#show').position().left,$('#show').position().top];

	        			//定义放大图片的位置
	        			let [newX,newY]=[curPYWidth*3,curPYHeight*3];
	        			//设置放大图片的位置
	        		    $('#big').find('img').css({'left':`-${newX}px`,'top':`-${newY}px`});
	        		})
	        	})
	        	// ----------------鼠标移上原始图片结束
	        	
	        	//鼠标移出原始图片时，隐藏放大镜和右侧的图片
	            $('#normal').mouseleave(function(){
	            		$('#show,#big').hide();
	            })

        	})
        </script>
    </head>
    <body>
    	<!-- 原始图片 -->
    	<div id="normal">
    		<img src="static/images/4.jpg">
    		<div id="show"></div>
    	</div>
    	<!-- 放大效果的图片 -->
    	<div id="big">
    		<img src="static/images/4.jpg">    		
    	</div>

    </body>
</html>

zuoye.css

*{ margin:0;padding:0; }
#normal{width: 450px;height: 450px;border: 1px solid #000;position: fixed;top: 20px;left: 20px;}/*原始图片*/
#normal img{width: 100%;height: 100%;}
#show{width: 150px;height: 150px;background: #754930;opacity: 0.4;position: absolute;display: none;}/*放大镜长宽*/
#big{width: 450px;height: 450px;border: 1px solid #000;position: relative;left: 520px;top: 20px;overflow: hidden;}/*放大图片区域长宽*/
#big>img{position: absolute;width: 1350px;height: 1350px;}/*放大图片的长宽*/

Correcting teacher：灭绝师太Correction time：2018-11-21 17:45:16
Teacher's summary：每一个js效果，只要摸清楚逻辑，用起来就不难，加油！

图片放大镜效果实战总结

Popular Entries