站长资源代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery放大镜-www.wangdahai.cn</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
margin:0;
padding:0;
}
.small_box {
width:180px;
height:180px;
margin-left:10px;
margin-top:10px;
position:relative;
}
.small_box img {
width:180px;
height:180px;
}
.small_box .mask {
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
opacity:0;
z-index:2;
cursor:move;
}
.small_box .float_layer {
position:absolute;
width:50px;
height:50px;
background:rgba(0,0,0,0.5);
display:none;
}
.big_box {
position:absolute;
left:200px;
top:10px;
width:250px;
height:250px;
overflow:hidden;
display:none;
}
.big_box img {
position:absolute;
}
</style>
</head>
<body>
<div class="small_box">
<span class="mask"></span>
<span class="float_layer"></span>
<img src="http://www.jq22.com/img/cs/500x500-1.png">
</div>
<div class="big_box">
<img src="http://www.jq22.com/img/cs/500x500-1.png">
</div>
<script>
$(".mask").mouseover(function() {
$(".float_layer").show()
$(".big_box").show()
})
$(".mask").mouseout(function() {
$(".float_layer").hide()
$(".big_box").hide()
})
$(".mask").mousemove(function(e) {
var l = e.pageX - $(".small_box").offset().left - ($(".float_layer").width() / 2)
var t = e.pageY - $(".small_box").offset().left - ($(".float_layer").height() / 2)
if (l < 0) {
l = 0
}
if (l > $(this).width() - $(".float_layer").width()) {
l = $(this).width() - $(".float_layer").width()
}
if (t < 0) {
t = 0
}
if (t > $(this).height() - $(".float_layer").height()) {
t = $(this).height() - $(".float_layer").height()
}
$(".float_layer").css({
"left": l,
"top": t
})
var pX = l / ($(".mask").width() - $(".float_layer").width())
var pY = t / ($(".mask").height() - $(".float_layer").height())
$(".big_box img").css({
"left": -pX * ($(".big_box img").width() - $(".big_box").width()),
"top": -pY * ($(".big_box img").height() - $(".big_box").height())
})
})
</script>
</body>
</html>
评论前必须登录！
注册