search

Home >Web Front-end >JS Tutorial >js implementation of image magnification and dragging special effects code sharing_javascript skills

js implementation of image magnification and dragging special effects code sharing_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:40:421184browse

The example in this article describes the js implementation of image enlargement and drag-and-drop special effects code. Share it with everyone for your reference. The details are as follows:
js is a very practical js special effect that implements image magnification and dragging. It realizes the magnification and dragging functions of images. It does not use the jquery plug-in. It is implemented with native javascript. In addition to clicking the zoom in and out buttons to control the image. You can also use the mouse wheel to zoom in or out the image.
运行效果图：                               ----------------------查看效果 源码下载-------- ---------------

Tips: If the browser does not work properly, you can try switching the browsing mode.
The code for implementing image magnification and dragging effects using js shared with everyone is as follows 

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>js实现图片放大和拖拽特效</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"
 style="overflow-y: hidden; overflow-x: hidden" oncopy="document.selection.empty()"
 leftmargin="0" topmargin="0" onselect="document.selection.empty()" marginheight="0"
 marginwidth="0">
 
 <div id="Layer1">
  <table cellspacing="2" cellpadding="0" border="0">
   <tbody>
    <tr>
     <td> 
      
     </td>
     <td>
      <img title="向上" style="cursor: hand" onClick="clickMove('down')" height="20" src="images/up.gif"
       width="20">
     </td>
     <td> 
      
     </td>
    </tr>
    <tr>
     <td>
      <img title="向左" style="cursor: hand" onClick="clickMove('right')" height="20" src="images/left.gif"
       width="20">
     </td>
     <td>
      <img title="还原" style="cursor: hand" onClick="realsize();" height="20" src="images/zoom.gif"
       width="20">
     </td>
     <td>
      <img title="向右" style="cursor: hand" onClick="clickMove('left')" height="20" src="images/right.gif"
       width="20">
     </td>
    </tr>
    <tr>
     <td> 
      
     </td>
     <td>
      <img title="向下" style="cursor: hand" onClick="clickMove('up')" height="20" src="images/down.gif"
       width="20">
     </td>
     <td> 
      
     </td>
    </tr>
    <tr>
     <td> 
      
     </td>
     <td>
      <img title="放大" style="cursor: hand" onClick="bigit();" height="20" src="images/zoom_in.gif"
       width="20">
     </td>
     <td> 
      
     </td>
    </tr>
    <tr>
     <td> 
      
     </td>
     <td>
      <img title="缩小" style="cursor: hand" onClick="smallit();" height="20" src="images/zoom_out.gif"
       width="20">
     </td>
     <td> 
      
     </td>
    </tr>
   </tbody>
  </table>
 </div>
 <p>
  <br>
 </p>
 <div id="hiddenPic" style="z-index: 1; left: 0px; visibility: hidden; width: 0px;
  position: absolute; top: 150px; height: 0px">
  <img src="http://ww2.sinaimg.cn/large/adde8400gw1eeazlmtqa8j20qd0mdadm.jpg" border="0" name="images2">
 </div>
 <div class="dragAble" id="block1" onMouseOver="dragObj=block1; drag=1;" style="z-index: 10;
  left: 0px; width: 0px; position: absolute; top: 150px; height: 0px" onMouseOut=""
  drag="0">
  <img onmousewheel="return onWheelZoom(this)" style="zoom: 0.7" src="images/adde8400gw1eeazlmtqa8j20qd0mdadm.jpg"
   border="0" name="images1">
 </div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

The core code is as follows: 

function onWheelZoom(obj){ //滚轮缩放
 zoom = parseFloat(obj.style.zoom);
 tZoom = zoom + (event.wheelDelta>0 &#63; 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 &#63; nTY + e.clientY - y : nTY + event.clientY - y)+"px";
 oDragObj.style.left = (nn6 &#63; nTX + e.clientX - x : nTX + event.clientX - x)+"px";
 return false;
 }
}

function initDrag(e) {
 var oDragHandle = nn6 &#63; e.target : event.srcElement;
 var topElement = "HTML";
 while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
 oDragHandle = nn6 &#63; oDragHandle.parentNode : oDragHandle.parentElement;
 }
 if (oDragHandle.className=="dragAble") {
 isdrag = true;
 oDragObj = oDragHandle;
 nTY = parseInt(oDragObj.style.top+0);
 y = nn6 &#63; e.clientY : event.clientY;
 nTX = parseInt(oDragObj.style.left+0);
 x = nn6 &#63; 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){ //滚轮缩放
zoom = parseFloat(obj.style.zoom);
tZoom = zoom + (event.wheelDelta>0 &#63; 0.05 : -0.05);
if(tZoom<0.1 ) return true;
obj.style.zoom=tZoom;
return false;
}

The above is the js code to implement image enlargement and drag-and-drop special effects shared with you. I hope you like it.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JS simply implements multi-level Select linkage menu effect code_javascript skillsNext article：JS simply implements multi-level Select linkage menu effect code_javascript skills

Related articles

See more