Home>

JS to achieve picture zoom and drag special effects is a very practical js special effects, to achieve the picture zoom and drag functions,There is no use of the jquery plugin, which is implemented using native javascript, except to click the zoom in and zoom out buttons to control the zoom in and out of the pictureYou can also use the mouse's scroll wheel to control the zoom of the picture.

Tip:If the browser does not work properly,Try switching the browsing mode.

The code for implementing the effects of zooming in and dragging the js for everyone to share is as follows

<! Doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>js for picture zoom and drag effects</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
 <link rel="stylesheet" href="css/style.css">
 <script type="text/javascript" src="js/drag_map.js"></script>
 <style type="text/css">
  body {font-size:12px;font-family:"verdana", "arial", "helvetica", "sans-serif";} td {font-size:12px;line-height:150%;} td {font -size:12px;color:#000000;} a {font-size:12px;color:#000000;} #layer1 {z-index:100;position:absolute;top:150px;} #layer2 {z-index:1;position:absolute;}
 </style>
 <script type="text/javascript">
  function mm_reloadpage (init) {
   if (init == true) with (navigator) {
    if ((appname == "netscape") &&(parseint (appversion) == 4)) {
     document.mm_pgw=innerwidth;document.mm_pgh=innerheight;onresize=mm_reloadpage;
    }
   }
   else if (innerwidth!=document.mm_pgw || innerheight!=document.mm_pgh) location.reload ();
  }
  mm_reloadpage (true);
 </script>
</head>
<body onload="" onmouseup="document.selection.empty ()" oncontextmenu="return false"
 onselectstart="return false" ondragstart="return false" onbeforecopy="return false"
 oncopy="document.selection.empty ()"
 leftmargin="0" topmargin="0" onselect="document.selection.empty ()" marginheight="0"
 marginwidth="0"&​​gt;
 <div>
  <table cellspacing="2" cellpadding="0" border="0"&​​gt;
   <tbody>
    <tr>
     <td>
     </td>
     <td>
      <img onclick="clickmove (" down ")" height="20" src="images/up.gif"
       width="20">
     </td>
     <td>
     </td>
    </tr>
    <tr>
     <td>
      <img onclick="clickmove (" right ")" height="20" src="images/left.gif"
       width="20">
     </td>
     <td>
      <img onclick="realsize ();" height="20" src="images/zoom.gif"
       width="20">
     </td>
     <td>
      <img onclick="clickmove (" left ")" height="20" src="images/right.gif"
       width="20">
     </td>
    </tr>
    <tr>
     <td>
     </td>
     <td>
      <img onclick="clickmove (" up ")" height="20" src="images/down.gif"
       width="20">
     </td>
     <td>
     </td>
    </tr>
    <tr>
     <td>
     </td>
     <td>
      <img onclick="bigit ();" height="20" src="images/zoom_in.gif"
       width="20">
     </td>
     <td>
     </td>
    </tr>
    <tr>
     <td>
     </td>
     <td>
      <img onclick="smallit ();" height="20" src="images/zoom_out.gif"
       width="20">
     </td>
     <td>
     </td>
    </tr>
   </tbody>
  </table>
 </div>
 <p>
  <br>
 </p>
 <div>
  <img src="http://ww2.sinaimg.cn/large/adde8400gw1eeazlmtqa8j20qd0mdadm.jpg" border="0" name="images2">
 </div>
 <div onmouseover="dragobj=block1;drag=1;" onmouseout=""
  drag="0"&​​gt;
  <img onmousewheel="return onwheelzoom (this)" src="images/adde8400gw1eeazlmtqa8j20qd0mdadm.jpg"
   border="0" name="images1">
 </div>
<divmicrosoft yahei ";">
</div>
</body>
</html>

The core code is as follows:

function onwheelzoom (obj) {//roller zoom
 zoom=parsefloat (obj.style.zoom);
 tzoom=zoom + (event.wheeldelta>0?0.05:-0.05);
 if (tzoom<0.1) return true;
 obj.style.zoom=tzoom;
 return false;
}

JS key code:

drag=0
move=0
var ie=document.all;
var nn6=document.getelementbyid&&! document.all;
var isdrag=false;
var y, x;
var odragobj;
function movemouse (e) {
 if (isdrag) {
 odragobj.style.top=(nn6?nty + e.clienty-y:nty + event.clienty-y) + "px";
 odragobj.style.left=(nn6?ntx + e.clientx-x:ntx + event.clientx-x) + "px";
 return false;
 }
}
function initdrag (e) {
 var odraghandle=nn6?e.target:event.srcelement;
 var topelement="html";
 while (odraghandle.tagname!=topelement &&odraghandle.classname!="dragable") {
 odraghandle=nn6?odraghandle.parentnode:odraghandle.parentelement;
 }
 if (odraghandle.classname == "dragable") {
 isdrag=true;
 odragobj=odraghandle;
 nty=parseint (odragobj.style.top + 0);
 y=nn6?e.clienty:event.clienty;
 ntx=parseint (odragobj.style.left + 0);
 x=nn6?e.clientx:event.clientx;
 document.onmousemove=movemouse;
 return false;
 }
}
document.onmousedown=initdrag;
document.onmouseup=new function ("isdrag=false");
function clickmove (s) {
 if (s == "up") {
 dragobj.style.top=parseint (dragobj.style.top) + 100;
 } else if (s == "down") {
 dragobj.style.top=parseint (dragobj.style.top)-100;
 } else if (s == "left") {
 dragobj.style.left=parseint (dragobj.style.left) + 100;
 } else if (s == "right") {
 dragobj.style.left=parseint (dragobj.style.left)-100;
 }
}
function smallit () {
 var height1=images1.height;
 var width1=images1.width;
 images1.height=height1/1.2;
 images1.width=width1/1.2;
}
function bigit () {
 var height1=images1.height;
 var width1=images1.width;
 images1.height=height1 * 1.2;
 images1.width=width1 * 1.2;
}
function realsize ()
{
 images1.height=images2.height;
 images1.width=images2.width;
 block1.style.left=0;
 block1.style.top=0;
}
function featsize ()
{
 var width1=images2.width;
 var height1=images2.height;
 var width2=701;
 var height2=576;
 var h=height1/height2;
 var w=width1/width2;
 if (height1<height2&&width1&width2)
 {
 images1.height=height1;
 images1.width=width1;
 }
 else
 {
 if (h>w)
 {
 images1.height=height2;
 images1.width=width1 * height2/height1;
 }
 else
 {
 images1.width=width2;
 images1.height=height1 * width2/width1;
 }
 }
 block1.style.left=0;
 block1.style.top=0;
}
function onwheelzoom (obj) {//roller zoom
zoom=parsefloat (obj.style.zoom);
tzoom=zoom + (event.wheeldelta>0?0.05:-0.05);
if (tzoom<0.1) return true;
obj.style.zoom=tzoom;
return false;
}
  • Previous Detailed single and multiple action examples in Struts
  • Next The difference between MySQL execute, executeUpdate, and executeQuery