jQuery補充，模擬圖片放大鏡
阿新 • • 發佈：2017-05-11
logs hidden oct event scrip position tro 顯示 reat
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補充，模擬圖片放大鏡