jQuery放大镜
<!doctype html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reading glass</title>
<script src="jquery10.min.js"></script>
<style>
.main_img{ height: 150px; width: 200px;overflow: hidden; border: 2px #ccc solid; /*opacity: 0.6;*/ position: relative; float: left;}
.main_img:hover{}
.main_img img{height: 100%;width: 100%;}
.show_img{ height:400px; width: 400px;overflow: hidden; border: 2px #ccc solid;/* display: none;*/ position: relative; }
.show_img img{position: absolute;}
.move_img{position: absolute; border: 1px solid #ccc; }
.move_img div{opacity: 0.4; background-color: #ccc; width: 100%; height: 100%}
</style>
</head>
<body>
<div class = "main_img">
<img src="1.jpg" alt="">
<div class = 'move_img'>
<div></div>
</div>
</div>
<div class = "show_img">
<img src="1.jpg" alt="">
</div>
</body>
</html>
<script>
/*
功能： 图片放大镜功能
方法名： readingGlass
参数： obj -> 主图div对象
show_obj -> 显示div对象
move_obj -> 主图里面的移动div对象
*/
function readingGlass(obj,show_obj,move_obj){
function move(e){
//鼠标的坐标
var mxx = e.clientX;
var myy = e.clientY;
//主图片左边与顶部距浏览器左边和顶部的距离
var ox = obj.offset().left;
var oy = obj.offset().top;
//鼠标在主主图片里的坐标
var dx = mxx - ox;
var dy = myy - oy;
//主图片框的内部的宽高
var ow = obj.width();
var oh = obj.height();
//移动比例
var ddx = -dx/ow;
var ddy = -dy/oh;
//显示容器的宽高
var w_show= show_obj.width();
var h_show= show_obj.height();
//显示图片的宽高
var w_show_img = show_obj.find("img").width();
var h_show_img = show_obj.find("img").height();
//小盒子的位置
smx = dx-(w_show/w_show_img )*ow/2;
smy = dy-(h_show/h_show_img )*oh/2+$(window).scrollTop();
//显示盒子中图片的位置
move_x = ddx*w_show_img+w_show/2;
move_y = ddy*h_show_img+h_show/2;
//小盒子位置越界与显示越界判定
if(smx<=0){
smx = 0;
move_x = 0;
}else if(smx>=(ow-(w_show/w_show_img )*ow)){
smx = ow-(w_show/w_show_img )*ow;
move_x = -w_show_img+w_show;
}
if(smy<=0){
smy = 0;
move_y = 0;
}else if(smy>=(oh-(h_show/h_show_img )*oh)){
smy = oh-(h_show/h_show_img )*oh;
move_y = -h_show_img+h_show;
}
//小盒子的宽高
move_obj.css({"width":(w_show/w_show_img )*ow,"height":(h_show/h_show_img )*oh});
// 小盒子的位置设定
move_obj.animate({"left":smx,"top":smy},0);
//显示盒子中图片的位置
show_obj.find("img").animate({"left":move_x+"px","top":move_y+"px"},0);
}
obj.mouseenter(function(){
$(document).bind('mousemove',move)
move_obj.show(0);
show_obj.show(400);
return false;
}).mouseleave(function(){
move_obj.hide(200);
show_obj.hide(200);
$(document).unbind('mousemove',move)
return false;
})
}
readingGlass($(".main_img"),$(".show_img"),$(".move_img"));
</script>
源码下载
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Reading glass</title><script src="jquery10.min.js"></script><style>.main_img{ height: 150px; width: 200px;overflow: hidden; border: 2px #ccc solid; /*opacity: 0.6;*/ position: relative; float: left;}.main_img:hover{}.main_img img{height: 100%;width: 100%;}.show_img{ height:400px; width: 400px;overflow: hidden; border: 2px #ccc solid;/* display: none;*/ position: relative; }.show_img img{position: absolute;}.move_img{position: absolute; border: 1px solid #ccc; }.move_img div{opacity: 0.4; background-color: #ccc; width: 100%; height: 100%}</style></head><body><div class = "main_img">
<img src="1.jpg" alt="">
<div class = 'move_img'><div></div></div>
</div>
<div class = "show_img"><img src="1.jpg" alt=""></div>
</body></html><script>/*功能：图片放大镜功能方法名：readingGlass参数：obj -> 主图div对象show_obj -> 显示div对象move_obj -> 主图里面的移动div对象*/
function readingGlass(obj,show_obj,move_obj){
function move(e){//鼠标的坐标var mxx = e.clientX;varmyy = e.clientY;
//主图片左边与顶部距浏览器左边和顶部的距离varox = obj.offset().left;var oy = obj.offset().top;
//鼠标在主主图片里的坐标var dx = mxx - ox;var dy = myy - oy;//主图片框的内部的宽高var ow = obj.width();var oh = obj.height();//移动比例var ddx = -dx/ow;var ddy = -dy/oh;//显示容器的宽高var w_show= show_obj.width();var h_show= show_obj.height();//显示图片的宽高var w_show_img = show_obj.find("img").width();var h_show_img = show_obj.find("img").height();
//小盒子的位置smx = dx-(w_show/w_show_img )*ow/2;smy = dy-(h_show/h_show_img )*oh/2+$(window).scrollTop();//显示盒子中图片的位置move_x = ddx*w_show_img+w_show/2;move_y = ddy*h_show_img+h_show/2;//小盒子位置越界与显示越界判定if(smx<=0){smx = 0;move_x = 0;}else if(smx>=(ow-(w_show/w_show_img )*ow)){smx = ow-(w_show/w_show_img )*ow;move_x = -w_show_img+w_show;}
if(smy<=0){smy = 0;move_y = 0;}else if(smy>=(oh-(h_show/h_show_img )*oh)){smy = oh-(h_show/h_show_img )*oh;move_y = -h_show_img+h_show;}
//小盒子的宽高move_obj.css({"width":(w_show/w_show_img )*ow,"height":(h_show/h_show_img )*oh});// 小盒子的位置设定move_obj.animate({"left":smx,"top":smy},0);
//显示盒子中图片的位置
show_obj.find("img").animate({"left":move_x+"px","top":move_y+"px"},0);
}
obj.mouseenter(function(){$(document).bind('mousemove',move)move_obj.show(0);show_obj.show(400);return false;
}).mouseleave(function(){move_obj.hide(200);show_obj.hide(200);$(document).unbind('mousemove',move)return false;
})}readingGlass($(".main_img"),$(".show_img"),$(".move_img"));
</script>
