首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现图片放大和拖拽特效代码分享

Posted in Javascript onSeptember 05, 2015

本文实例讲述了js实现图片放大和拖拽特效代码。分享给大家供大家参考。具体如下：
js实现图片放大和拖拽特效是一款非常实用的js特效，实现了图片的放大和拖拽功能，没用用到jquery插件，是用原生javascript实现的，除了点击放大和缩小按钮来控制图片的放大缩小，还可以使用鼠标的滚轮控制图片的缩放。
运行效果图：                               ----------------------查看效果 源码下载-----------------------

js实现图片放大和拖拽特效代码分享

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
 为大家分享的js实现图片放大和拖拽特效代码如下

<!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>

核心代码如下：

function onWheelZoom(obj){ //滚轮缩放
 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关键代码：

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){ //滚轮缩放
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实现图片放大和拖拽特效代码，希望大家可以喜欢。

js实现图片放大和拖拽特效代码分享

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
Prototype使用指南之selector.js说明
Oct 26 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化（一）
Feb 16 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
vue实现户籍管理系统
May 29 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 #Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 #Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 #Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 #Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 #Javascript
基于JS实现简单的样式切换效果代码
Sep 04 #Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 #Javascript
localStorage(1) 加载异常(1) BottomSheetDialog(1) virtualenv(1) DeOldify(1) scrapy(1) Postman(1) 反射(1) 注解(1) 横向滚动(1)
You might like
一个改进的UBB类
2006/10/09 PHP
mysql 全文搜索 技巧
2007/04/27 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
python实现清屏的方法
2015/04/30 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
Python实现的建造者模式示例
2018/08/06 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
使用Pycharm分段执行代码
2020/04/15 Python
Django如何实现防止XSS攻击
2020/10/13 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
菲律宾优惠券网站：MetroDeal
2019/04/12 全球购物
Eclipse面试题
2014/03/22 面试题
个人简历中自我评价
2014/02/11 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
十八大观后感
2015/06/12 职场文书
军训后的感想
2015/08/07 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS