首页
所有分类
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 相关文章推荐
遨游，飞飞，IE，空中网 浏览器无提示关闭方法
Jul 11 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
javascript实现倒计时效果
Feb 17 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
自定义组件(1) Set接口(1) Vue(10) HashSet集合(1) KVM(1) click(1) 本地化存储(1) persistedstate(1) vuex(1) Storage(1)
You might like
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
php生成图片验证码的方法
2016/04/15 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
js 目录列举函数
2008/11/06 Javascript
学习ExtJS border布局
2009/10/08 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
python实现文件的备份流程详解
2019/06/18 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
Python换行与不换行的输出实例
2020/02/19 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
openCV提取图像中的矩形区域
2020/07/21 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
室内设计实习自我鉴定
2013/09/25 职场文书
材料加工硕士生求职信
2013/10/10 职场文书
会计电算化应届生自荐信
2014/02/25 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
中国合伙人观后感
2015/06/02 职场文书
公司晚会主持词
2019/04/17 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
Python 内置函数速查表一览
2021/06/02 Python
详解Python函数print用法
2021/06/18 Python
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis