首页 > 代码库 > js 实现显示局部方法的效果
js 实现显示局部方法的效果
网站上面有些时候一些小小的动作可能引起别人的瞩目，可能会增加别人对自己网站的兴趣，这是一个局部放大的小例子。先放上去，等到后期我有空了，再添加点东西把它变成一个插件。
<head>
<title></title>
<script src="http://www.mamicode.com/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<style type="text/css" >
#bigimg
{
position:absolute;
display:none;
overflow:hidden;
height:200px;
width:200px;
}
#smalldiv
{
position:absolute;
display:none;
}
</style>
<script type="text/javascript">
$(function () {
var count = 0;
$("#img").mousemove(function (e) {
var smalldiv = $("#smalldiv");
var ZoomSizeWidth = $("#img1").width() / $("#img_zoom").width(); //宽放大的倍数
var ZoomSizeHeight = $("#img1").height() / $("#img_zoom").height();//高放大的倍数
$("#bigimg").show();
smalldiv.show();
var mouseX = e.pageX + 5;
var mouseY = e.pageY + 5;
if (e.pageX < $(this).offset().left + smalldiv.width() / 2) {//当鼠标的X坐标小于图片与div遮罩层的x坐标和是ｄｉｖｘ＝０；
divX = 0;
}
else if (e.pageX > $(this).offset().left + smalldiv.width() / 2 && e.pageX < $(this).offset().left + $(this).width() - smalldiv.width() / 2) {//鼠标的X坐标在图片内部并且小于图片最右边的X坐标
divX = e.pageX - $(this).offset().left - smalldiv.width() / 2;
}
else if (e.pageX > $(this).offset().left + $(this).width() - smalldiv.width() / 2) {//鼠标的X坐标大于图片的最右边的X坐标 （Y轴同理）
divX = $(this).width() - smalldiv.width();
}
if (e.pageY < $(this).offset().top + smalldiv.height() / 2) {
divY = 0;
}
else if (e.pageY > $(this).offset().top + smalldiv.height() / 2 && e.pageY < $(this).offset().top + $(this).height() - smalldiv.height() / 2) {
divY = e.pageY - $(this).offset().top - smalldiv.height() / 2;
}
else if (e.pageY > $(this).offset().top - smalldiv.height()) {
divY = $(this).height() - smalldiv.height();
}
$("#bigimg").css("top", mouseY).css("left", mouseX);
smalldiv.css("top", divY).css("left", divX);
smalldiv.appendTo("#img");
var tempX = smalldiv.offset().left - $(this).offset().left;//通过对大图的位置偏移来起到放大的效果
var tempY = smalldiv.offset().top - $(this).offset().top;
//让图片实现左边位移
$("#img1").css("top", -tempY * ZoomSizeHeight).css("left", -tempX * ZoomSizeWidth);
});
$("#img_zoom").mouseleave(function () {
$("#smalldiv").hide();
$("#bigimg").hide();
});
})
</script>
</head>
<body>
<div id="img" style=" width:200px; height:200px;margin-left:200px; position:relative; margin-top:30px"><img alt="图片" src="http://www.mamicode.com/img/20120312171453_m8CJP.jpg" id="img_zoom" width="200" height="200"/></div>
<div id="bigimg" ><img id="img1" src="http://www.mamicode.com/img/20120312171453_m8CJP.jpg" width="800px" height="800px" style="position:absolute" /></div>
<div id="smalldiv" style="width:50px; background-color: rgba(0,0,0,0.5); height:50px; border:1px solid gray; "></div>
</body>
js 实现显示局部方法的效果