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实现图片放大和拖拽特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 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
You might like
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
go和python调用其它程序并得到程序输出
2014/02/10 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
python 有效的括号的实现代码示例
2019/11/11 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
zooplus波兰:在线宠物店
2019/07/21 全球购物
学术会议邀请函范文
2014/01/22 职场文书
升国旗演讲稿
2014/09/05 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
MySQL学习之基础命令实操总结
2022/03/19 MySQL