html5圖片放大展示
阿新 • • 發佈：2018-12-21
一.html編寫
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>商品放大效果</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div id="box"> <!--預設商品小圖--> <div class="posi"> <!--小圖部分--> <img src="img/TB2400x400.jpg" /> <!--span擋板部分--> <span class="move"></span> </div> <!--商品大圖的部分--> <div class="bigimg"> <img id="bimg" src="img/TB2.jpg" /> </div> </div> </body> <!--匯入--> <script type="text/javascript" src="js/jquery-2.1.0.js" ></script> <!--可以支援編寫js程式碼的環境--> <script type="text/javascript" > $(function(){ //1.獲取小圖片容器 var $gs = $("#box .posi"); //div class= "posi" //2.獲取擋板容器 var $gsmove = $("#box span"); //3.獲取存放大照片容器 var $gsImg = $("#box .bigimg"); //4.給小圖片容器獲取滑鼠浮動的觸發事件 $gs.hover(function(){ //把擋板顯示出來，把存放大照片的容器顯示出來 //讓擋板漸入 10毫秒 $gsmove.fadeIn(10); $gsImg.fadeIn(10); },function(){//當滑鼠不在懸浮範圍內後執行。 $gsmove.fadeOut(10); $gsImg.fadeOut(10); }); //5.獲取滑鼠移動的座標 - 控制擋板的移動 $gs.mousemove(function(e){ console.log("滑鼠的座標為:("+e.clientX+","+e.clientY+")"); //獲取滑鼠的座標引數 var cx =e.clientX; var cy =e.clientY; //獲取小圖容器的座標 //offset:當前元素針對於相對瀏覽器body的位置 var gl = $gs.offset().left;//獲取X座標 var gt = $gs.offset().top;//獲取到Y座標 console.log("小容器的座標為:("+gl+","+gt+")") //擋板相對要移動的位置 //cx - gl >=0 ;X軸方向要移動的距離 //cy - gt >=0 ;Y移動軸方向要距離 //獲取擋板的寬高的一半 var mw = $gsmove.width()/2; var mh = $gsmove.height()/2; //做判斷,擋板的移動距離不能未賦值 var mleft = cx-gl-mw; var mtop = cy-gt-mh; //小容器的寬高 var gsw = $gs.width(); var gsh = $gs.height(); if(mleft<=0){ mleft = 0; }else if(mleft>=gsw-mw*2){ mleft = gsw - mw*2; } if(mtop<=0){ mtop = 0; }else if(mtop>=gsh - mh*2){ mtop = gsh-mh*2 } //擋板要移動的位置 $gsmove.css({"left":mleft,"top":mtop}); //根據移動的比例控制大圖的移動比例 ;0<=2<=10 = 2/10 var l_b = mleft/(gsw-mw*2); var t_b = mtop/(gsh-mh*2); //大圖要移動的距離 var b_left = l_b*($("#box .bigimg img").width() - $gsImg.width()); var b_top = t_b*($("#box .bigimg img").height() - $gsImg.height()); console.log("大圖要移動的距離:"+b_left+","+b_top) $("#bimg").css({"left":-b_left,"top":-b_top}); // $("#box .bigimg img").css({"left":-b_left,"top":-b_top}); }); }); </script> </html>
二.樣式
*{ margin: 0px; padding: 0px; } #box{ width: 400px; height: 400px; background: aquamarine; margin-top: 100px; margin-left: 200px; position: relative; } .posi{ width: 266px; height: 400px; margin: 0px auto; position: relative; } .posi span{ position: absolute; left: 0px; top: 0px; width: 133px; height: 133px; display: none; background:url(../img/Tb2.png); } .bigimg{ width: 400px; height: 400px; background: #7FFFD4; /*超出容器的部分隱藏*/ overflow: hidden; position: absolute; left: 400px; top: 0px; display: none; } #bimg{ position: absolute; }
三.效果展示
