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实现IE下按backspace相当于返回操作
Mar 18 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
vue 实现用户登录方式的切换功能
Apr 14 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
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
利用json获取字符出现次数的代码
2012/03/22 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
Python2随机数列生成器简单实例
2017/09/04 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
计算机专业职业规划
2014/02/28 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
instantclient客户端 连接oracle数据库
2022/04/26 Oracle
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python