1.结构
<div class="small0">
<img src="img/01.png" alt="01"/>
<div class="mask0"></div>
</div>
<div class="big0">
2.样式
<style>
*{margin: 0;padding: 0}
.small0{
width: 300px;
position: absolute;
top: 80px;
left: 80px;
border: 1px solid #ccc;
}
.small0 .mask0{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.6) url("img/point.png");
cursor: move;
}
.small0 img{
width: 100%;
display: block;
}
.big0{
width: 602px;
height:630px ;
position: absolute;
top: 200px;
left: 400px;
border: 1px solid #ccc;
background: url("img/01.png") no-repeat 0 0;
background-size: 300% 300%;
display: none;
}
</style>
3.js
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/biger.js"></script>
<script>
$(".small0").magnifier({
small:".small0",
mask:".mask0",
big:".big0"
})
</script>
4.biger.js
/**
* Created by Administrator on 2017/11/8.
*/
$.fn.extend({
magnifier:function(option){
var defaul = {
small:".small",
mask:".mask",
big:".big"
}
var opt = $.extend({},defaul,option);
console.log(opt)
$(opt.small).hover(function(){
$(opt.big).show()
},function(){
$(opt.big).hide();
})
$(opt.small).mousemove(function(e){
//计算小红快的位置
$(opt.mask).offset({//让小红快跟着鼠标走
left:e.clientX - $(opt.mask).width()/2,
top:e.clientY - $(opt.mask).height()/2
//让鼠标位于小红快的中心
})
//posittion().left距离父元素左边的值
if($(opt.mask).position().left<=0){
$(opt.mask).css('left',0);//固定永远不会超出父元素的左边
}
if($(opt.mask).position().left>=($(opt.small).width()-$(opt.mask).width())){
$(opt.mask).css('left',$(opt.small).width()-$(opt.mask).width());
}
if($(opt.mask).position().top<=0){
$(opt.mask).css('top',0);
}
if($(opt.mask).position().top>=($(opt.small).height()-$(opt.mask).height())){
$(opt.mask).css('top',$(opt.small).height()-$(opt.mask).height());
}
var retx = $(opt.small).width()-$(opt.mask).width();
//小盒子与$(".mask")的宽度的差,
var rety = $(opt.small).height()-$(opt.mask).height();
//小盒子与$(".mask")的高度的差,
var x,y;
x = $(opt.mask).position().left / retx * 100;
y = $(opt.mask).position().top / rety * 100;
var set = x+"% "+y+"%";
$(opt.big).css({backgroundPosition:set})
});
}
})