如何使用JQuery在页面上做一个放大镜?

各位大虾,如何使用JQuery在页面上做一个放大镜?我刚刚做完一个网站，想在页面上弄个好玩的东西···想到放大镜，但不知道怎么写。jQuery

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>·Å´ó¾µÐ§¹û</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
}
.box {
width:434px;
height:292px;
margin:10px auto;
}
.left {
width:202px;
height:282px;
float:left;
padding:2px;
position:relative;
border:3px solid #ccc;
}
.left img {
float:left;
border:1px solid #7b7b7b;
}
.left .move {
width:50px;
height:50px;
background:#666;
opacity:0.3;
top:3px;
left:3px;
position:absolute;
z-index:1;
display:none;
filter: alpha(opacity: 30);
border:1px solid #000;
}
.left .mask {
width:100%;
height:100%;
opacity:0;
top:0px;
left:0px;
position:absolute;
z-index:2;
background:#000;
cursor:move;
filter:alpha(opacity: 0);
}
.right {
width:202px;
height:282px;
float:left;
padding:2px;
overflow:hidden;
display:inline;
position:relative;
margin:0 0 0 10px;
display:none;
border:3px solid #ccc;
}
.right img {
position:absolute;
top:0px;
left:0px;
}
</style>
<script type="text/javascript">
//获取id
function $(id){
return typeof id === "string" ? document.getElementById(id) : id;
}//获取tagName
function $$(oParent, elem){
return (oParent || document).getElementsByTagName(elem);
}//获取className
function $$$(oParent, sClass){
var aElem = $$(oParent, '*');
var aClass = [];
var i = 0;
for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
return aClass;
}//初始化对象
function magnifier(){
this.initialize.apply(this, arguments);
}magnifier.prototype = {
initialize : function(){
var _this = this;
if($('box')){
this.oBox = $('box');
this.oLeft = $$$(this.oBox, 'left')[0];
this.oMove = $$$(this.oBox, 'move')[0];
this.oMask = $$$(this.oBox, 'mask')[0];
this.oLimg = $$(this.oLeft, 'img')[0];
this.oRight = $$$(this.oBox, 'right')[0];
this.oRimg = $$(this.oRight, 'img')[0];
this.oMask.onmouseover = function(){
_this.mouseover();
};
this.oMask.onmousemove = function(e){
_this.mousemove(e);
};
this.oMask.onmouseout = function(){
_this.mouseout();
};
}
},
mouseover : function(){
this.oMove.style.display = 'block';
this.oRight.style.display = 'block';
},
mousemove : function(e){
this.oEvent = e || event;
this.left = (this.oEvent.clientX - this.oBox.offsetLeft) - this.oMove.offsetWidth / 2;
this.top = (this.oEvent.clientY - this.oBox.offsetTop) - this.oMove.offsetHeight / 2;
this.margin();
this.oMove.style.left = this.left + 'px';
this.oMove.style.top = this.top + 'px';
this.bigImg();

},
mouseout : function(){
this.oMove.style.display = 'none';
this.oRight.style.display = 'none';
},
margin : function(){
this.marightW = this.oMask.offsetWidth - this.oMove.offsetWidth;
this.marightH = this.oMask.offsetHeight - this.oMove.offsetHeight;
if(this.left < 3){
this.left = 3;
}else if(this.left > this.marightW - 3){
this.left = this.marightW - 3;
}
if(this.top < 3){
this.top = 3;
}else if(this.top > this.marightH - 3){
this.top = this.marightH - 3;
}
},
bigImg : function(){
this.bigW = this.oMask.offsetWidth - this.oMove.offsetWidth;
this.bigH = this.oMask.offsetHeight - this.oMove.offsetHeight;
this.bigX = this.left / (this.bigW);
this.bigY = this.top / (this.bigH);
this.oRimg.style.left = -this.bigX * (this.bigW) +'px'
this.oRimg.style.top = -this.bigY * (this.bigH) +'px'
}
};
</script>
<script type="text/javascript">
window.onload = function(){
new magnifier();
};
</script>
</head>
<body>
<div class="box" id="box">
<div class="left">
     <span class="move"></span>
        <span class="mask"></span>
     <img src="http://www.codefans.net/jscss/demoimg/201108/small.jpg" />
    </div>
    <div class="right"><img src="http://www.codefans.net/jscss/demoimg/201108/big.jpg" /></div>
</div>
</body>
</html>