HTML代码
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>放大镜Demo</title> | |
<link rel="stylesheet" type="text/css" href="details.css"/> | |
<script src="jquery-1.11.0.js"type="text/javascript"charset="utf-8"></script> | |
<script src="details.js"type="text/javascript"charset="utf-8"></script> | |
</head> | |
<body> | |
<!-----------------------------------------main1---------------------------------------------> | |
<div class="dm1left flt"> | |
<!------------大----------> | |
<div class="m1big"> | |
<ul class="m1biglist"> | |
<li class="z5"><imgsrc="imgs/fbbxxx1.jpg"/></li> | |
<li><imgsrc="imgs/fbbxxx2.jpg"></li> | |
<li><imgsrc="imgs/fbbxxx3.jpg"/></li> | |
<li><imgsrc="imgs/fbbxxx4.jpg"/></li> | |
<li><imgsrc="imgs/fbbxxx5.jpg"/></li> | |
<li><imgsrc="imgs/fbbxxx6.jpg"/></li> | |
<li><imgsrc="imgs/fbbxxx7.jpg"/></li> | |
</ul> | |
</div> | |
<!------------中----------> | |
<div class="m1center"> | |
<div class="m1cenmask z10"></div> | |
<ul class="m1cenlist"> | |
<li class="z5"><imgsrc="imgs/fbbxx1.jpg"/></li> | |
<li><imgsrc="imgs/fbbxx2.jpg"/></li> | |
<li><imgsrc="imgs/fbbxx3.jpg"/></li> | |
<li><imgsrc="imgs/fbbxx4.jpg"/></li> | |
<li><imgsrc="imgs/fbbxx5.jpg"/></li> | |
<li><imgsrc="imgs/fbbxx6.jpg"/></li> | |
<li><imgsrc="imgs/fbbxx7.jpg"/></li> | |
</ul> | |
</div> | |
<!------------小----------> | |
<div class="m1small"> | |
<ul class="m1smlist"> | |
<li class="m1smactive"><imgsrc="imgs/fbbx1.jpg"/><em></em></li> | |
<li><imgsrc="imgs/fbbx2.jpg"/><em></em></li> | |
<li><imgsrc="imgs/fbbx3.jpg"/><em></em></li> | |
<li><imgsrc="imgs/fbbx4.jpg"/><em></em></li> | |
<li><imgsrc="imgs/fbbx5.jpg"/><em></em></li> | |
<li><imgsrc="imgs/fbbx6.jpg"/><em></em></li> | |
<li><imgsrc="imgs/fbbx7.jpg"/><em></em></li> | |
</ul> | |
</div> | |
</div> | |
</body> | |
</html> |
css代码
/*------------------------------放大镜-----------------------------------*/ ul,li{ list-style: none; } .dm1left{ overflow: hidden; clear:both; position:relative; } .m1big { display: none; position: absolute; left: 495px; top: 0px; width: 480px; height: 480px; } .m1biglist, .m1biglist li { position: absolute; left: 0; top: 0; width: 800px; height: 800px; overflow: hidden; } .m1center{ width: 480px; height: 480px; border: 1px solid #ccc; position:relative; cursor: pointer; } .m1cenlist li { position: absolute; left:0; top: 0; right:0; bottom:0; width: 480px; height: 480px; } .m1cenmask{ display: none; position: absolute; left: 0; top: 0; width: 200px; height: 200px; background: rgba(255,255,0,.5); cursor: all-scroll; z-index: 100; } .m1small{ margin-top:15px; height: 62px; } .m1smlist li{ position: relative; float: left; margin: 0 3px; border: 1px solid #fff; } .m1smlist li em{ display: none; width: 0; height: 0; position: absolute; left: 50%; top: -5px; margin-left: -3px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid red; } .m1smlist .m1smactive{ border: 1px solid red; } .m1smlist .m1smactive em{ display: block; }
js部分
$(function() { /*------------------------放大镜效果----------------------------*/ /*----------显示对应的中型图--------*/ $('.m1smlist li').hover(function() { var index = $(this).index(); $(this).addClass('m1smactive').siblings().removeClass('m1smactive'); $('.m1cenlist li').eq(index).css('z-index', 6).siblings().css('z-index', 0); $('.m1biglist li').eq(index).css('z-index', 6).siblings().css('z-index', 0); }) /*-------------显示大型图-------------*/ $('.m1cenlist li').on('mouseenter', function() { $('.m1cenmask').show(); $('.m1big').show(); }); $('.m1cenmask').on('mouseenter', function() { $('.m1cenmask').show(); $('.m1big').show(); }); /*-------------隐藏大型图-------------*/ $('.m1cenlist li').on('mouseleave', function() { $('.m1big').hide(); $('.m1cenmask').hide(); }); $('.m1cenmask').on('mouseleave', function() { $(this).css('', '') $('.m1big').hide(); $('.m1cenmask').hide(); }); /*------------------拖拽-----------------------*/ $('.m1center').on('mousemove', function(ev) { var maskW = $('.m1cenmask').width() / 2; var maskH = $('.m1cenmask').height() / 2; var m1cenL = $('.m1center').offset().left; var m1cenT = $('.m1center').offset().top; var m1cenW = $('.m1center').width(); var m1cenH = $('.m1center').height(); var m1bigW = $('.m1biglist').width(); var m1bigH = $('.m1biglist').height(); var WinX = Math.floor(ev.pageX); var WinY = Math.floor(ev.pageY); var maskL = WinX - m1cenL - maskW; var maskT = WinY - m1cenT - maskH; //遮罩层上边界 if(WinY <= (m1cenT + maskH)) { maskT = 0; } //遮罩层下边界 if(WinY >= (m1cenT + m1cenH - maskH)) { maskT = m1cenH - maskH * 2; } //遮罩层左边界 if(WinX <= (m1cenL + maskW)) { maskL = 0; } //遮罩层右边界 if(WinX >= (m1cenL + m1cenW - maskW)) { maskL = m1cenW - maskW * 2; } console.log(maskL,maskT); //大型图右边界 $('.m1cenmask').css({ 'left': Math.floor(maskL), 'top': Math.floor(maskT) }); $('.m1biglist').css({ 'left': -maskL*1.14, 'top': -maskT*1.14 }); }); });