jQuery实现天猫商品放大镜效果

最新推荐文章于 2025-06-20 14:12:47 发布

原创

最新推荐文章于 2025-06-20 14:12:47 发布 · 775 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery

思路：
1、分四部分：产品主图，用来定位的小框，放大图，和产品不同侧面的小图
2、定位的小框定位在产品主图元素上，放大图定位在右侧，当鼠标进入产品主图时小框和放大图显示出来。
3、放大图元素大小应与产品主图大小一样，设置放大图图片大小为主图大小的放大倍数，小框跟随鼠标移动，小框偏移地址多少，放大图偏移地址应是其负数，只显示小框区域的图片。
4、使小框跟随鼠标移动而移动，即获取鼠标当前位置，计算小框定位的top 、left值，并判断范围使其不超出主图元素大小。
5、将小框的top、left值获取给放大图，使其显示小框所在范围，注意！！放大图是主图的几倍top、left值也扩大相应倍数，并且值应是负数，小框右移，放大图图片应该左移，从而达到效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>产品页面</title>
<script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<style type="text/css">
*{
    
    
margin:0;
padding:0;
}
.product{
    
    
margin-left:50px;
width:400px;
}
.product-img{
    
    
margin:20px auto;
text-align:center;
}
.showimg{
    
    
position:relative;
width:400px;
height:400px;
border:1px solid #f5f5f5;
}
.show{
    
    
width:400px;
height:400px;
}
.product-img img{
    
    
margin:0 3px;
width:60px