• js图片放大镜 可动态更换图片


    现仅已.NET为例,HTML代码如下

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
     2 <HTML>
     3  <HEAD>
     4   <title>test</title>
     5   <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
     6   <meta name="CODE_LANGUAGE" Content="C#">
     7   <meta name="vs_defaultClientScript" content="JavaScript">
     8   <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
     9   <script language="JavaScript">
    10 <!--
    11 var smallX = 200; //缩略图宽度
    12 var bigX = 600; //预览窗大小,可以任意设置
    13 var bigY = 450;
    14 var srcX = -1; //原图大小,可以任意设置. 如都为-1将使用图片原始大小
    15 var srcY = -1;
    16 var border = 5; //边框
    17 var smallY,viewX,viewY,bl,isIE,vX,vY;
    18 window.onload=function (){
    19  head.innerHTML="图片已载入";
    20  isIE=window.event?1:0;
    21  if (srcX==-1 && srcY==-1){srcX=document.getElementByIdx('bigpic').width;srcY=document.getElementByIdx('bigpic').height;}
    22  else{document.getElementByIdx('bigpic').width=srcX;document.getElementByIdx('bigpic').height=srcY;}
    23  smallY=srcY*smallX/srcX;
    24  viewX=bigX/srcX*smallX; //预览范围
    25  viewY=bigY/srcY*smallY;
    26  bl=srcX/smallX; //缩小比例
    27  document.getElementByIdx('smallpic').width=smallX;
    28  document.getElementByIdx('smallpic').height=smallY;
    29  smallbox.style.borderWidth=border;
    30  smallbox.style.width=document.getElementByIdx('smallpic').offsetWidth+border*2*isIE;
    31  smallbox.style.height=document.getElementByIdx('smallpic').offsetHeight+border*2*isIE;
    32  bigbox.style.borderWidth=border;
    33  bigbox.style.width=bigX+border*2*isIE;
    34  bigbox.style.height=bigY+border*2*isIE;
    35  view.style.left=smallbox.offsetLeft + border;
    36  view.style.top=smallbox.offsetTop + border;
    37  view.style.width=viewX- !isIE*3+1;
    38  view.style.height=viewY- !isIE*3+1;
    39 }
    40 function move(e){
    41  var e = window.event?window.event:e;
    42  if (!isIE){vX=e.pageX-border-smallbox.offsetLeft;
    43  vY=e.pageY-border-smallbox.offsetTop}
    44  else{vX=e.offsetX;vY=e.offsetY}
    45  vX+=-viewX/2;
    46  vY+=-viewY/2;
    47  if (vX < 0) vX = 0;
    48  if (vY < 0) vY = 0;
    49  if (vX > smallX - viewX) vX = smallX - viewX;
    50  if (vY > smallY - viewY) vY = smallY - viewY;
    51  bigpico.style.marginLeft = - vX * bl;
    52  bigpico.style.marginTop = - vY * bl;
    53  view.style.left = vX + smallbox.offsetLeft + border;
    54  view.style.top = vY + smallbox.offsetTop + border;
    55 }
    56 //-->
    57 </script>
    58 <style type="text/css">
    59 <!--
    60 *{padding:0;margin:0}
    61 body{background:black}
    62 img{display:block;}
    63 #smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden;font-size:0px}
    64 #bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden;font-size:0px}
    65 #view{border:1px #ddd solid;width:0px;height:0px;position:absolute;font-size:0px}
    66 #head{text-align:center;line-height:40px;font:bold 16px/40px;color:pink}
    67 //-->
    68 </style>
    69  </HEAD>
    70  <body MS_POSITIONING="GridLayout">
    71   <form id="Form1" method="post" runat="server">
    72    <div id="head">图片loading...</div>
    73 <div id="smallbox"><img id="smallpic" src="Upimages/ShopImages/<%=simage%>" border="0" onmousemove="move(event)"></div>
    74 <div id="bigbox"><div id="bigpico"><img id="bigpic" src="Upimages/ShopImages/<%=zimage%>" border="0"></div></div>
    75 <div id="view" onmousemove="if (!isIE) move(event)"></div>
    76   </form>
    77  </body>
    78 </HTML>

    其中的<%=simage%>,<%=zimage%>都是程序调用的。预览效果如下:

  • 相关阅读:
    【并查集】亲戚
    【图论】Car的旅行线路 NOIP 2001
    【贪心】排座椅
    【DP】花店橱窗布置
    【NOIP】NOIP考纲总结+NOIP考前经验谈
    【NOIP】考前须知
    NOIP 2016 PJ T4 魔法阵
    NOIP 2016 PJ T3 海港
    【高精度】麦森数 NOIP 2003
    【带权并查集】食物链 NOIP 2001
  • 原文地址:https://www.cnblogs.com/Chaser-Eagle/p/3684822.html
Copyright © 2020-2023  润新知