abstrak:html代碼<div id="normal"> <img src="static/images/fan.jpg" alt=""> <div id="show&quo
html代碼
<div id="normal"> <img src="static/images/fan.jpg" alt=""> <div id="show"></div> </div> <div id="big"> <img src="static/images/fan.jpg" alt=""> </div>
css代碼
<style type="text/css"> *{margin:0;padding: 0;} #normal{width: 450px;height: 450px;border:1px solid #000000;position: fixed;top:20px;left:20px;} #normal img{width: 100%;height: 100%;} #show{width:150px;height:150px;background: #000000;opacity: 0.2;position: absolute;display: none;} #big{width:450px;height: 450px;border:1px solid #000000;position: relative;top:20px;left:490px;overflow: hidden;display: none;} #big img{width: 1350px;height: 1350px;position: absolute;} </style>
js代碼
<script type="text/javascript"> $(function(){ $('#normal').mouseover(function(){ $('#show').show(); $('#big').show(); $(this).mousemove(function(yd){ //獲取鼠標的當前位置 var mx = yd.pageX; var my = yd.pageY; //獲取原圖窗口距離文檔的偏移位置 var ox = $('#normal').offset().top; var oy = $('#normal').offset().left; //計算鼠標的相對位置 var mpx = mx-ox; var mpy = my-oy; //給入小框的移動距離 $('#show').css({ 'left':mpx-$('#show').width()/2+'px', 'top':mpy-$('#show').height()/2+'px' }); //獲取小框相對于父元素的偏移位置 var showOffsetX = $('#show').position().left; var showOffsetY = $('#show').position().top; //console.log(mx+'~'+ox+'~'+showOffsetX); //計算小框的最大偏移位置 var maxOffsetX = $(this).width()-$('#show').width(); var maxOffsetY = $(this).height()-$('#show').height(); //左 if(showOffsetX<=0){ $('#show').css('left','0px'); } //右 if(showOffsetX>=maxOffsetX){ $('#show').css('left',maxOffsetX+'px'); } //上 if(showOffsetY<=0){ $('#show').css('top','0px'); } //下 if(showOffsetY>=maxOffsetY){ $('#show').css('top',maxOffsetY+'px'); } //獲取小框重新計算后相對于父元素的偏移位置 showOffsetX = $('#show').position().left; showOffsetY = $('#show').position().top; $('#big').find('img').css({ left:-showOffsetX*3+'px', top:-showOffsetY*3+'px' }); }); }); $('#normal').mouseout(function(){ $('#show').hide(); $('#big').hide(); }); }) </script>
放大鏡圖片的寬高/展示圖片的寬高 = 放大鏡的寬高/放大鏡區(qū)域的寬高
效果圖
Guru membetulkan:韋小寶Masa pembetulan:2018-12-11 09:11:13
Rumusan guru:恩!寫的很不錯!這個效果在各種商城項目中使用的最為頻繁!課后還要記得多多練習啊!