js實現圖片放大鏡效果
阿新 • • 發佈：2019-02-13
一、HTML檔案
二、CSS樣式<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>放大鏡效果</title> <link rel="stylesheet" type="text/css" href="css/my.css"> <script type="text/javascript" src="js/jquery-1.3.1.js"></script> <script type="text/javascript" src="js/my.js"></script> </head> <body> <div id="content1" class="flitrue"> <div id="small_pic1" class="flitrue"> <span id="mark1" class="flitrue"></span> <span id="block1" class="flitrue"></span> <img src="img/11.jpg"/> </div> <div id="big_pic1" class="flitrue"> <img id="pic_img1" class="flitrue" src="img/12.jpg"/> </div> </div> <div id="content2" class="flitrue"> <div id="small_pic2" class="flitrue"> <span id="mark2" class="flitrue"></span> <span id="block2" class="flitrue"></span> <img src="img/21.jpg"/> </div> <div id="big_pic2" class="flitrue"> <img id="pic_img2" class="flitrue" src="img/22.jpg"/> </div> </div> <div id="content3" class="flitrue"> <div id="small_pic3" class="flitrue"> <span id="mark3" class="flitrue"></span> <span id="block3" class="flitrue"></span> <img src="img/31.jpg"/> </div> <div id="big_pic3" class="flitrue"> <img id="pic_img3" class="flitrue" src="img/32.jpg"/> </div> </div> </body> </html>
三、js檔案#content1{ height:400px;width:200px;border:1px solid #ccc;padding:10px;margin:10px; position:relative;overflow: hidden;float:left; } #small_pic1,#small_pic2,#small_pic3{ height:200px;width: 200px;margin:0px auto;position:relative;overflow:hidden; } #content2 { height:400px;width:200px;border:1px solid #ccc;padding:10px;margin:10px; position:relative;overflow: hidden;float:left; } #content3{ height:400px;width:200px;border:1px solid #ccc;padding:10px;margin:10px; position:relative;overflow: hidden;float:left; } #small_pic1 img,#small_pic2 img,#small_pic3 img{ margin:0px auto; } #big_pic1 img,#big_pic2 img,#big_pic3 img{ position: absolute; } #mark1,#mark2,#mark3{ width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0; } #block1,#block2,#block3{ width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; } #big_pic1,#big_pic2,#big_pic3{ height:199px;width: 199px;top: 210px; margin:0px auto; position: absolute;overflow:hidden; border:1px solid #CCC; display: none; }
/** * */ function setClass(){ var arr=[]; var i=0; var flitrue=[]; arr=$('.flitrue'); for(i=0;i<arr.length;i++){ flitrue.push(arr[i]); } /** *frist image */ flitrue[2].onmouseover=function(){ flitrue[4].style.display='block'; flitrue[3].style.display='block'; } flitrue[2].onmouseout=function(){ flitrue[4].style.display='none'; flitrue[3].style.display='none'; } flitrue[2].onmousemove=function(event){ var e=event; var left=e.offsetX-flitrue[3].offsetWidth/2; var top=e.offsetY-flitrue[3].offsetHeight/2; if(left<0){ left=0; }else if(left>flitrue[2].offsetWidth-flitrue[3].offsetWidth){ left=flitrue[2].offsetWidth-flitrue[3].offsetWidth; }; if(top<0){ top=0; }else if(top>flitrue[2].offsetHeight-flitrue[3].offsetHeight){ top=flitrue[2].offsetHeight-flitrue[3].offsetHeight; }; flitrue[3].style.top=top+'px'; flitrue[3].style.left=left+'px'; //大圖的顯示比例percentX percentY var percentX=left/(flitrue[2].offsetWidth-flitrue[3].offsetWidth); var percentY=top/(flitrue[2].offsetHeight-flitrue[3].offsetHeight); flitrue[5].style.left=-percentX*(flitrue[5].offsetWidth-flitrue[4].offsetWidth)+'px'; flitrue[5].style.top=-percentY*(flitrue[5].offsetHeight-flitrue[4].offsetHeight)+'px'; }; /** *second image */ var array=[]; //array=$('.flitrue').find('.flitrue');//find 只能獲得除父標籤以外的子標籤 array=$('.flitrue'); var content2=array[6]; var small_pic2=array[7]; var mark2=array[8]; var block2=array[9]; var big_pic2=array[10]; var big_img2=array[11]; mark2.onmouseover=function(){ big_pic2.style.display='block'; block2.style.display='block'; } mark2.onmouseout=function(){ big_pic2.style.display='none'; block2.style.display='none'; } mark2.onmousemove=function(event){ var e=event; var left=e.clientX-content2.offsetLeft-block2.offsetWidth/2; var top=e.clientY-content2.offsetTop-block2.offsetHeight/2; if(left<0){ left=0; }else if(left>mark2.offsetWidth-block2.offsetWidth){ left=mark2.offsetWidth-block2.offsetWidth; }; if(top<0){ top=0; }else if(top>mark2.offsetHeight-block2.offsetHeight){ top=mark2.offsetHeight-block2.offsetHeight; }; block2.style.top=top+'px'; block2.style.left=left+'px'; //大圖的顯示比例percentX percentY var percentX=left/(mark2.offsetWidth-block2.offsetWidth); var percentY=top/(mark2.offsetHeight-block2.offsetHeight); big_img2.style.left=-percentX*(big_img2.offsetWidth-big_pic2.offsetWidth)+'px'; big_img2.style.top=-percentY*(big_img2.offsetHeight-big_pic2.offsetHeight)+'px'; }; /** *third image */ var content3=array[12]; var small_pic3=array[13]; var mark3=array[14]; var block3=array[15]; var big_pic3=array[16]; var big_img3=array[17]; mark3.onmouseover=function(){ big_pic3.style.display='block'; block3.style.display='block'; } mark3.onmouseout=function(){ big_pic3.style.display='none'; block3.style.display='none'; } mark3.onmousemove=function(event){ var e=event; var left=e.clientX-content3.offsetLeft-block3.offsetWidth/2; var top=e.clientY-content3.offsetTop-block3.offsetHeight/2; if(left<0){ left=0; }else if(left>mark3.offsetWidth-block3.offsetWidth){ left=mark3.offsetWidth-block3.offsetWidth; }; if(top<0){ top=0; }else if(top>mark3.offsetHeight-block3.offsetHeight){ top=mark3.offsetHeight-block3.offsetHeight; }; block3.style.top=top+'px'; block3.style.left=left+'px'; //大圖的顯示比例percentX percentY var percentX=left/(mark3.offsetWidth-block3.offsetWidth); var percentY=top/(mark3.offsetHeight-block3.offsetHeight); big_img3.style.left=-percentX*(big_img3.offsetWidth-big_pic3.offsetWidth)+'px'; big_img3.style.top=-percentY*(big_img3.offsetHeight-big_pic3.offsetHeight)+'px'; }; } /** *主入口 */ window.onload=function(){ setClass(); }