京东等电商网站中可以对商品进行放大观察，本文要实现的就是模仿这个放大镜功能，大致效果如下图所示:
简要说明实现思路：
1.原图窗口与放大窗口插入的是同一个图片，不过原图窗口的图片要适当缩小，放大窗口图片保持原大小，超出部分设置隐藏
2.先定下放大比例，例如本文原图大小为1000*1000，可以把原图窗口的图片设为400*400，这样放大窗口就能实现2.5倍的放大效果了（两个窗口的大小是一样的！！都是400*400）
3.首先实现小框框跟着鼠标移动的功能（本文设置鼠标总是在小框框的中心位置）
4.再实现放大窗口中的图片随着小框框的移动实现自身移动
5.鼠标(小框框)向右移动，放大窗口中的图片是要向左移动的！他们的方向总是相反
6.小框框大小不是随意设置，与放大倍数有关，本文放大2.5倍，则原图窗口应该也是小框框大小的2.5倍，即小框框大小160*160
具体代码如下：
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>简易放大镜的实现</title> <style> body,ul,li{padding: 0;margin: 0;list-style: none;} .orig,.fd{ width: 400px; height: 400px; border:1px solid red; position: absolute; } .fd{ left:410px; top:0; overflow: hidden; display: none; } .blocks{ /*小图的宽高比例 窗口的宽度 / 大图的宽度 * 窗口的宽度 */ width:160px; height:160px; background:rgba(254,238,167,.4); position: absolute; left: 0; top:0; display: none; } </style> </head> <body> <!-- 建立显示原图窗口 --> <div class="orig"> <!-- 插入要放大的图片 --> <img src="./images/3.jpg" alt="" width="400"> <!-- 加入用于锁定放大区域的小框框 --> <div class="blocks"></div> </div> <!-- 建立显示放大图片的窗口 --> <div class="fd"><img src="./images/3.jpg" alt="" style="position: absolute;"> </div> <script src="./jquery-1.8.3.min.js"></script> <script> // 绑定鼠标移入原图窗口事件 $('.orig').mouseover(function(e){ $('.fd').css('display','block'); $('.blocks').css('display','block'); }) //绑定鼠标在原图窗口移动的事件 $('.orig').mousemove(function(e){ // 获取鼠标当前的位置 var x=e.clientX; var y=e.clientY; // 获取原图窗口距离文档的偏移位置 var sX=$('.orig').offset().left; var sY=$('.orig').offset().top; // 计算鼠标的相对位置（相对于原图窗口的偏移距离） var mx=x-sX; var my=y-sY; // 获取小框框的宽高 var mw=$('.blocks').width()/2; var mh=$('.blocks').height()/2; // 鼠标移动后小框框的移动距离 $('.blocks').css({left:mx-mw+'px',top:my-mh+'px'}); // 获取小框框的偏移位置 var lw=$('.blocks').position().left; var lh=$('.blocks').position().top; // 判断边界（小框框只能在原图窗口范围内移动） var maxW=$('.orig').width()-$('.blocks').width() var maxH=$('.orig').height()-$('.blocks').height() // 左边界 if(lw<=0){$('.blocks').css('left','0px');} // 右边界 if(lw>=maxW){ $('.blocks').css('left',maxW+'px'); } // 上边界 if(lh<=0){$('.blocks').css('top','0px');} // 下边界 if(lh>=maxH){ $('.blocks').css('top',maxH+'px'); } // 获取小框框的偏移位置 var lw=$('.blocks').position().left; var lh=$('.blocks').position().top; // 计算鼠标在小图里的位置 *2.5计算大图移动的比例 var newX=lw*2.5; var newY=lh*2.5; $('.fd img').css({left:-newX+'px',top:-newY+'px'}); }) //绑定鼠标离开原图窗口事件 $(
238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
