標籤：接收 window head http mouse block outer 寬度 title
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‘); //反向縱向滑動比例，除以玻璃罩縱向滑動值，等於大圖縱向滑動值 });});
jQuery補充，類比圖片放大鏡
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
