提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Jquery实现图片放大镜效果的思路及代码(自写)

jQuery思路代码 实现 图片 效果 自写 放大镜
2023-06-13 09:15:06 时间
网上一大堆限制多，文档也难看懂，而且麻烦~自己写了个。大笑

算法：

第一步：

放大图片的位置=鼠标所在的容器的宽或者高除以容器自身的高度和宽度，求出鼠标在容器中移动的百分比

第二部：

得到百分比之后

x=-(x百分比*图片的宽度-显示容器的宽度/2);

y=-(y百分比*图片的高度-显示容器的高度/2);

两个参数，x和y，就是大图的位置了，后面加了个显示容器的大小/2是为了保证图片显示在中间。

效果图：
 
代码：
复制代码代码如下:

<!DOCTYPEHTML>
<html>
<head>
<title>商品信息</title>
</head>
<style>

html,body,img,a,div{
margin:0px;
padding:0px;
border:0px;
font:12px/150%Arial,Verdana,"宋体";
color:rgb(102,102,102);
}

div:after{
clear:both;
content:".";
height:0;
visibility:hidden;
diplay:block;
}

div{
zoom:1;
}
.main-body{
text-align:center;
padding:15px;
}
.head-box{
height:400px;
border:#CCC1pxsolid;
}
.head-box-left{
width:300px;
height:390px;
/*border:#CCC1pxsolid;*/
float:left;
padding:3px;
position:relative;
}
.head-box-right{
width:500px;
height:390px;
border:#CCC1pxsolid;
float:left;
margin-left:10px;
}
.goods-max-img{
width:300px;
height:300px;
display:block;
border:#CCC1pxsolid;
position:relative;
cursor:move;
}
.goods-img-list{
width:300px;
height:80px;

margin-top:10px;
}

.goods-change{
display:block;
float:left;
width:17px;
height:54px;
background:url("../web/imgs/goods-change-btn.png");
}
.change-prev{
margin-right:5px;
margin-left:2px;
}
.change-prev:HOVER{
background-position:-34px0px;
}
.change-next{
margin-left:5px;
background-position:-17px0px;
}
.change-next:HOVER{
margin-left:5px;
background-position:-51px0px;
}

.goods-img-list-box{
width:250px;
height:54px;
/*border:1px#CCCsolid;*/
border:0px1px;
float:left;
position:relative;
overflow:hidden;
}
.goods-img-list-boxul{
margin:0px;
padding:0px;
position:absolute;
top:1px;
left:0px;
width:500px;
}
.goods-img-list-boxulli{
display:block;
float:left;
width:50px;
height:50px;
border:#CCC1pxsolid;
margin-left:3px;
}
.goods-img-list-boxullia{
display:block;
width:100%;
height:100%;
text-decoration:none;
}
.preview-box{
position:absolute;
top:0px;
width:500px;
height:500px;
background-color:white;
border:#CCC1pxsolid;
left:310px;
display:none;
overflow:hidden;
}

</style>
<scripttype="text/javascript">

$(function(){

$(".goods-max-img").mousemove(function(event){
$(".preview-box").show();
//计算百分比
varx=event.screenX;
vary=event.screenY;
x-=$(this).offset().left;
y=y-$(this).offset().top-65;
//得出比例
x=(x/300).toFixed(2);
y=(y/300).toFixed(2);

//250容器的大小/2
x=-($("#preview-img").width()*x-250);
y=-($("#preview-img").height()*y-250);

$("#preview-img").css("top",y+"px");
$("#preview-img").css("left",x+"px");
document.title=x+","+y;
});

$(".goods-max-img").mouseout(function(){
$(".preview-box").hide();
});

});

</script>
<body>
<divclass="main-body">

<!--头部信息-->
<divclass="head-box">

<!--头部左侧信息-->
<divclass="head-box-left">
<!--商品大图-->
<aclass="goods-max-img">
<imgwidth="100%"height="100%"alt="加载中..."src="http://pic.desk.chinaz.com/file/201211/5/shierybizi7.jpg">
</a>
<divclass="preview-box">
<divstyle="width:500px;height:500px;overflow:hidden;">
<imgid="preview-img"style="position:absolute;"alt="加载中..."src="http://pic.desk.chinaz.com/file/201211/5/shierybizi7.jpg">
</div>
</div>
<!--大图结束-->
<!--图片列表-->
<divclass="goods-img-list">
<ahref="javascript:void();"class="goods-changechange-prev"title="上一张"></a>
<divclass="goods-img-list-box">
<ul>
<li><ahref="javascript:void()">8</a></li>
<li><ahref="javascript:void()">7</a></li>
<li><ahref="javascript:void()">6</a></li>
<li><ahref="javascript:void()">5</a></li>
<li><ahref="javascript:void()">3</a></li>
<li><ahref="javascript:void()">3</a></li>
<li><ahref="javascript:void()">2</a></li>
</ul>
</div>
<ahref="javascript:void();"class="goods-changechange-next"title="下一张"></a>
</div>
<!--图片列表结束-->
</div>
<!--头部左侧信息结束-->

<divclass="head-box-right"></div>
</div>
<!--头部信息结束-->

<!--主体内容-->
<divclass="body-content">

</div>
<!--主体内容结束-->
</div>
</body>
</html>

相关文章