jQuery补充，模拟图片放大镜
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/fdj.css"> </head> <body> <div class="outer"> <!--放大镜主体div--> <div class="small_box"> <!--放大镜小图区域--> <div class="float"></div> <!--小图里的玻璃罩区域--> <img src="img/small.jpg"> </div> <div class="big_box"> <!--放大镜大图区域--> <img src="img/big.jpg"> </div> </div> <script src="jquery/jquery.min.js"></script> <script src="fdj.js"></script> </body> </html>
css
@charset "utf-8"; *{ margin: 0; padding: 0; } .outer{ /*放大镜主体div*/ width: 350px; height: 350px; border:5px solid #0f68ee; } .outer .small_box{ /*放大镜小图区域*/ position: relative; } .outer .small_box .float{ /*放大镜小图区域里的玻璃罩*/ width: 175px; height: 175px; background-color: #ABC7E2; opacity: 0.4; position: absolute; display: none; } .outer .big_box{ /*放大镜大图区域*/ width: 400px; height: 400px; border:5px solid #0f68ee; overflow:hidden; position: absolute; top: 0; left: 370px; display: none; } .outer .big_box img{ position: absolute; }
js
/** * Created by admin on 2017/5/10. */ $(function () { // 当鼠标悬浮到小图片区域的时候，执行鼠标悬浮事件 $('.outer .small_box').mouseover(function () { $('.outer .small_box .float').css('display','block'); //显示小图片区域里的玻璃罩 $('.outer .big_box').css('display','block'); //显示大图片区域 }); //当前鼠标离开小图片区域的时候，执行鼠标离开事件 $('.outer .small_box').mouseout(function () { $('.outer .small_box .float').css('display','none'); //隐藏小图片区域里的玻璃罩 $('.outer .big_box').css('display','none'); //隐藏大图片区域 }); // 当鼠标在小图片区域移动的时候，执行鼠标移动事件 $('.outer .small_box').mousemove(function (e) { var _event = e || window.event; //接收事件里的event对象信息 var small_box_height = $('.outer .small_box').height(); //获取小图区域div的高度 var small_box_width = $('.outer .small_box').width(); //获取小图区域div的宽度 var float_height = $('.outer .small_box .float').height(); //获取小图区域里的玻璃罩高度 var float_width = $('.outer .small_box .float').width(); //获取小图区域里的玻璃罩宽度 var float_height_ban = $('.outer .small_box .float').height()/2; //获取小图区域里的玻璃罩一半高度 var float_width_ban = $('.outer .small_box .float').width()/2; //获取小图区域里的玻璃罩一半宽度 //换算玻璃罩滑动值 var mouse_left = _event.clientX - float_width_ban; //将鼠标点与左边边距，减去玻璃罩的一半，就是玻璃罩横向滑动值 var mouse_top = _event.clientY - float_height_ban; //将鼠标点与上边边距，减去玻璃罩的一百，就是玻璃罩纵向滑动值 if (mouse_left < 0){ //玻璃罩横向滑动值，如果小于0 mouse_left = 0; //将璃罩横向滑动值，设置为0 }else if (mouse_left >small_box_width - float_width){ //判断璃罩横向滑动值，如果大于了小图区域宽度减去玻璃罩宽度，说明璃罩横向滑动值向右已经超出了小图区域 mouse_left = small_box_width - float_width; //将璃罩横向滑动值，设置成小图区域宽度减去玻璃罩宽度，就是横向滑动值向右到头 } if (mouse_top < 0){ //玻璃罩纵向滑动值，如果小于0 mouse_top = 0; //将璃罩纵向滑动值，设置为0 }else if (mouse_top >small_box_height - float_height){ //判断璃罩纵向滑动值，如果大于了小图区域高度减去玻璃罩高度，说明璃罩纵向滑动值向下已经超出了小图区域 mouse_top = small_box_height - float_height; //将璃罩纵向滑动值，设置成小图区域高度减去玻璃罩高度，就是纵向滑动值向下到头 } $('.outer .small_box .float').css('left',mouse_left + 'px'); //获取到玻璃罩纵向滑动值 $('.outer .small_box .float').css('top',mouse_top + 'px'); //获取到玻璃罩横向滑动值 //换算大图滑动比例 //将大图片的宽度减去大图容器div宽度，除以小图容器div宽度减去玻璃罩宽度，等于大图反向横向滑动比例 var percentX = ($('.outer .big_box img').width()-$('.outer .big_box').width())/(small_box_width-float_width); //将大图片的高度减去大图容器div高度，除以小图容器div高度减去玻璃罩高度，等于大图反向纵向滑动比例 var percentY = ($('.outer .big_box img').height()-$('.outer .big_box').height())/(small_box_height-float_height); $('.outer .big_box img').css('left',-percentX*mouse_left+'px'); //反向横向滑动比例，除以玻璃罩横向滑动值，等于大图横向滑动值 $('.outer .big_box img').css('top',-percentY*mouse_top+'px'); //反向纵向滑动比例，除以玻璃罩纵向滑动值，等于大图纵向滑动值 }); });