放大镜就是等比放大图片，显示细节，常用在京东、淘宝等商品网站，增加顾客体验。效果如下：
用到的知识点 ：轮播 、 获取图片src并赋值、比例尺、pageX 、pageY 、offset().left 、offset().top。先简单介绍一下event.pageX、event.pageY 属性是返回鼠标指针的位置，相对于文档的左边缘。offset() 方法设置或返回被选元素相对于文档的偏移坐标。
当用于返回偏移时：该方法返回第一个匹配元素的偏移坐标。它返回一个带有两个属性（以像素为单位的 top 和 left 位置）的对象。
当用于设置偏移时： 该方法设置所有匹配元素的偏移坐标。
这里就不具体说布局，简单说一共分为三个部分：第一部分是下面的ul用来放置小图片，这里ul的宽度初始值可以给大一点，之后根据js获取每一个li的outerWidth(true)在对ul赋值就可以。
回弹效果是在js里判断时当到达边界的时候先让ul走一定的距离然后在回到正确位置，具体见最后代码。第一部分布局：
div{<!-用来放置装图片的ul，给左右按钮定位--> div{<!-用来装图片的ul，设置超出隐藏，ul用定位或者边距的的办法来实现滑动--> ul{ li{ img{} } }
} <button class="btnLeft"><</button><!—左按钮—> <button class="btnRight">></button><!—右按钮—> } |
第二部分是上面的div里面放置一个图片，同时还要有一个块状元素用来类比放大镜，定位到div上。
div{ img{}<!—宽高设置100%--> <p></p> <!—设置宽和高小于div的宽和高--> } |
第三部分是用来显示放大后的区域，一般在右侧，给一定的边距。布局也很简单就一个div，div要给定位不然显示后会把下面的文字挤出去，里面一张图片，宽高暂时设置100%后期通过js改。设置默认隐藏就可以。
整体思路：当点击ul li 的时获取index，获取img src 同时赋值给上面的box赋值给放大后的显示区域。因为当到达边界的时候li的类还需要继续走，而ul的定位不发生变化，为了后期判断方便，我们设置两个变量把他们分开进行判断，一个是index用来控制类，另一个是a用来控制ul边距。
//点击按钮图片轮换效果 var vIndex = $("#commodityS ul li").index(); var vSrc; var a = 0; var li_w = $("#commodityS ul li").outerWidth(true); var li_size = $("#commodityS ul li").length; var ul_w = li_w * li_size; $("#commodityS ul").css({"width": ul_w}); $("#commodityS ul li").click(function () { vIndex = $(this).index(); auto(); }); $(".btnRight").click(function () { vIndex++; a++; //控制ul左边位置 if (vIndex > li_size - 1 - 5 & vIndex <= li_size - 1) {//索引值大于个数-1-可视区域个数并且小于等于个数-1； a = li_size - 5; } else if (vIndex > li_size - 1) { a = li_size - 5;//保证边距不变 $("#commodityS ul").css({"left": -a * li_w - 15});//先让ul走一定的距离实现回弹效果 vIndex = li_size - 1; }; auto(); }); $(".btnLeft").click(function () { vIndex--; a--; //控制ul左边位置 if (vIndex < 5 & vIndex > 0) { a = 0; } else if (vIndex <= 0) { a = 0; $("#commodityS ul").css({"left": -a * li_w + 15}); vIndex = 0; }; auto(); }); function auto() { $("#commodityS ul").stop().animate({"left": -a * li_w}, 500) $("#commodityS ul li").eq(vIndex).addClass("select").siblings().removeClass("select"); vSrc = $("#commodityS ul li").eq(vIndex).children("img").attr("src"); $("#commodityB img").attr("src", vSrc); $("#magnifyingShow img").attr("src", vSrc); }; |
另一种判断方法就比较麻烦了，有兴趣的朋友可以看一下判断过程，只用一个变量：
$("#right").click(function () { index++; if (index % 5 === 0 & index != 0 & index < length) {//5是可视区域个数，length是li的个数 $("ul").animate({"margin-left": -5 * 180 * (Math.floor(index / 5))}, 500); } else if (index > length - 1) { index = length - 1; $("ul").animate({"margin-left": -5 * 180 * (Math.floor(index / 5))}, 500); } auto(); }); $("#left").click(function () { index--; if ((index + 1) % 5 === 0 & index > 0) { $("ul").animate({"margin-left": -5 * 180 * (Math.floor(index / 5))}, 500); } else if (index < 0) { index = 0; $("ul").animate({"margin-left": 0}, 500); } auto(); }); function auto() { $("ul li").eq(index).addClass("red").siblings().removeClass("red"); var src = $(".red img").attr("src"); $("#top_d img").attr("src", src); } |
放大镜一般用正方形，我们放大后的区域也是用正方形显示，当放大镜在图片从左边到右边，那么右边的显示区域也要把右边放大后的图片显示完整，我们给右边的图片放大的倍数就等于右边显示区域比上放大镜的宽，假如放大镜是宽高各200px；右边的显示区域为400*400；那么我们放大后的图片的宽高就得放大2倍，同时当放大镜走x的时候，我们右边的图片定位是2x。y轴同理。判断是为了防止放大镜到图片以外区域。
代码如下：
//放大镜效果 $("#commodityB").mousemove(function (ev) { $("#commodityB p,#magnifyingShow").show(); var x, y, i, j; i = $("#commodityB").offset().left;//获取上面图片盒子的到文档左侧的距离 j = $("#commodityB").offset().top; //获取上面图片盒子的到文档顶部的距离
var Show_w = $("#commodityB p").width();//获取放大镜的宽度 var Show_h = $("#commodityB p").height();//获取放大镜的高度
var B_w = $("#commodityB").width();//获取上面图片盒子的宽度 var B_h = $("#commodityB").height();//获取上面图片盒子的高度 x = ev.pageX - i - Show_w / 2;//放大镜的x定位=鼠标的距离-盒子的左侧距离-自身宽度一半；是为了使鼠标在放大镜中间。 y = ev.pageY - j - Show_h / 2;//放大镜的y定位 if (x < 0) { x = 0; } if (x > B_w - Show_w) { x = B_w - Show_w; } if (y < 0) { y = 0; } if (y > B_h - Show_h) { y = B_h - Show_h; } $("#commodityB p").css({"left": x, "top": y}) $("#magnifyingShow img").css({"width": 2* B_w, "height": 2 * B_h, "left": -2 * x, "top": -2 * y}); $("#commodityB").mouseout(function () { $("#commodityB p,#magnifyingShow").hide(); }); }); |
还可以用比例尺：用法就是获取上面装图片盒子的宽度和高度，获取里面放大镜的宽度和高度，其中盒子的宽度-放大镜的宽度就是放大镜x的定位区间，用x/这个区间值，就是比例尺。
在获取放大后图片的宽度和高度，用（获取放大后图片的宽高-显示窗口的宽高）*比例尺就是显示窗口定位。
优缺点：用比例尺的好处就是后台上传图片的时候出现问题，图片质量好一点。相对于第一种方法，没有第一种好理解，代码精简。