jq放大镜
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery放大鏡/title>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<style>* {margin:0;padding:0;
}
.small_box {width:250px;height:250px;margin-left:10px;margin-top:10px;position:relative;
}
.small_box img {width:250px;height:250px;
}
.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:100px;height:100px;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="image/01283a598c19b90000002129618e9d.jpg@1280w_1l_2o_100sh.png">
</div>
<div class="big_box"><img src="image/01283a598c19b90000002129618e9d.jpg@1280w_1l_2o_100sh.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) {//獲得鼠標移上去 mask盒子的實際移動距離 鼠標橫縱坐標 - 盒子到坐上邊界距離 - 盒子的實際寬高距離的二分之一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>
總結
- 上一篇： 几款流行的ipad上的PDF阅读器评测
- 下一篇： 04-03/遭遇 rookit/ynqc