放大镜效果优化

abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手风琴</title> <link rel="stylesheet&q

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>手风琴</title>
  <link rel="stylesheet" href="static/css/style5.css">
  <link rel="stylesheet" href="static/css/animate.min.css">
  <link rel="shortcut icon" href="static/images/logo1.png" type="image/x-icon">
  <script type="text/javascript" src="static/js/jquery.js"></script>
  <style>

  </style>
</head>
<body>

<div class="box">
   <img src="static/images/5.1.jpg" alt="">
<div class="hoverShow"></div>
</div>
<div class="big">
<img src="static/images/5.1.jpg"" alt="">
</div>

<script type="text/javascript">
	$(function(){
		$('.big').hide();

		$('.box').hover(function(){		//给的是absolute
			$('.hoverShow').show();
			$('.big').show();
			$('.box').mousemove(function(e){
				//跟随鼠标移动而移动
				$('.hoverShow').css({
					'top':e.pageY-20-$('.hoverShow').height()/2,	//减去偏移 再减去宽度高度一半
					'left':e.pageX-20-$('.hoverShow').width()/2
				})
				// console.log(e.pageY);

				// console.log(20+$('.box').height()-$('.hoverShow').height()/2);
				// alert(hoverT);
				var maxT = 20+$('.box').height()-$('.hoverShow').height()/2;	//获取最大偏移高度
				var maxW = 20+$('.box').width()-$('.hoverShow').width()/2;		//获取最大偏移宽度
				var minT = 20+$('.hoverShow').height()/2;						//获取最小偏移高度
				var minW = 20+$('.hoverShow').width()/2;						//获取最小偏移宽度

				var boxt_hovert = $('.box').height()-$('.hoverShow').height();	//获取大小box高度差
				var boxl_hoverl = $('.box').width()-$('.hoverShow').width();	//获取大小box宽度差
				// console.log(maxT);
				if(e.pageY>maxT){
					$('.hoverShow').css('top',boxt_hovert+'px');		//大于最大高度 值为大小box的高度差
				}
				if(e.pageX>maxW){
					$('.hoverShow').css('left',boxl_hoverl+'px');		//大于最大宽度 值为大小box的宽度差
				}
				if(e.pageY<minT){
					$('.hoverShow').css('top','0px');					//小于最小高度 值为0
				}
				if(e.pageX<minW){	
					$('.hoverShow').css('left','0px');					//小于最小宽度 值为0
				}
				var hoverT = parseInt($('.hoverShow').css('top'));		//获取当前小box的top值
				var hoverL = parseInt($('.hoverShow').css('left'));		//获取当前小box的left值
				$('.big').find('img').css({								//乘以倍数赋值给放大
					'left':-hoverL*3+'px',
					'top':-hoverT*3+'px',
				})


			})	
		},function(){
			$('.hoverShow').hide();
			$('.big').hide()
		})
	})
</script>


</body>
</html>

思路差不多

Correcting teacher：灭绝师太Correction time：2018-11-16 13:48:22
Teacher's summary：思路理顺了，做起来就简单，完成的不错，继续保持！

放大镜效果优化

Popular Entries