脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript图片的放大缩小及拖拽

JavaScript实现图片的放大缩小及拖拽功能示例

 更新时间：2019年05月14日 11:57:47   作者：辣姐什么鬼  
这篇文章主要介绍了JavaScript实现图片的放大缩小及拖拽功能,结合实例形式分析了javascript鼠标事件响应及针对图形元素的属性操作相关实现技巧,需要的朋友可以参考下

本文实例讲述了JavaScript实现图片的放大缩小及拖拽功能。分享给大家供大家参考，具体如下：

实现效果如下：

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{width:400px;height:400px;overflow:hidden;position:relative;border:1px solid #000;}
    div img{position:absolute;height:100%;width:auto;cursor:move;}
  </style>
</head>
<body>
<div id="div" onmousewheel="return bbimg(this)"><img id="img" border="0" src="img/zs.jpg" /></div>
<script language="javascript">
  var params = {
    zoomVal:1,
    left: 0,
    top: 0,
    currentX: 0,
    currentY: 0,
    flag: false
  };
  //图片缩放
  function bbimg(o){
    var o=o.getElementsByTagName("img")[0];
    params.zoomVal+=event.wheelDelta/1200;
    if (params.zoomVal >= 0.2) {
      o.style.transform="scale("+params.zoomVal+")";
    } else {
      params.zoomVal=0.2;
      o.style.transform="scale("+params.zoomVal+")";
      return false;
    }
  }
  //获取相关CSS属性
  var getCss = function(o,key){
    return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
  };
  //拖拽的实现
  var startDrag = function(bar, target, callback){
    if(getCss(target, "left") !== "auto"){
      params.left = getCss(target, "left");
    }
    if(getCss(target, "top") !== "auto"){
      params.top = getCss(target, "top");
    }
    //o是移动对象
    bar.onmousedown = function(event){
      params.flag = true;
      if(!event){
        event = window.event;
        //防止IE文字选中
        bar.onselectstart = function(){
          return false;
        }
      }
      var e = event;
      params.currentX = e.clientX;
      params.currentY = e.clientY;
    };
    document.onmouseup = function(){
      params.flag = false;
      if(getCss(target, "left") !== "auto"){
        params.left = getCss(target, "left");
      }
      if(getCss(target, "top") !== "auto"){
        params.top = getCss(target, "top");
      }
    };
    document.onmousemove = function(event){
      var e = event ? event: window.event;
      if(params.flag){
        var nowX = e.clientX, nowY = e.clientY;
        var disX = nowX - params.currentX, disY = nowY - params.currentY;
        target.style.left = parseInt(params.left) + disX+ "px";
        target.style.top = parseInt(params.top) + disY+ "px";
        if (typeof callback == "function") {
          callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
        }
        if (event.preventDefault) {
          event.preventDefault();
        }
        return false;
      }
    }
  };
  startDrag(document.getElementById("img"),document.getElementById("img"))
</script>
</body>
</html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 快速查找数组中的某个元素并返回下标示例

    快速查找数组中的某个元素并返回下标示例

    最近在写jquery的combobox插件时遇到效率问题，再加上jquery选择器的类帅选，导致效率很慢，采用以下方式二，可以轻松解决此问题
    2013-09-09
  • CSS+Table图文混排中实现文本自适应图片宽度（超简单+跨所有浏览器）

    CSS+Table图文混排中实现文本自适应图片宽度（超简单+跨所有浏览器）

    最近在为学乐网开发图片显示功能时遇到一个问题：在一个table中有两行，上边显示图片（大小随机），下边显示对图片的相关说明（文字长度随机）
    2009-02-02
  • JavaScript实现给数字添加千位分隔符

    JavaScript实现给数字添加千位分隔符

    这篇文章主要为大家详细介绍了JavaScript如何实现给数字添加千位分隔符,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-11-11
  • javascript实现删除前弹出确认框

    javascript实现删除前弹出确认框

    删除确认对话框的JS代码，有好几种写法，有简单的，有兼容好的，下面分别说几种方法，可根据自己需要选用
    2015-06-06
  • 使用canvas实现有趣的弹簧效果

    使用canvas实现有趣的弹簧效果

    这篇文章主要为大家详细介绍了如何使用canvas实现有趣的弹簧效果,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解一下
    2023-12-12
  • 详解JS如何判断对象上是否存在某个属性

    详解JS如何判断对象上是否存在某个属性

    判断某一个对象里面是否存在某个属性，是常见错误场景排查，但是你真的知道该如何使用嘛，本文为大家整理了常用的三种方法，希望对大家有所帮助
    2023-05-05
  • flv.js的具体使用教程

    flv.js的具体使用教程

    flv.js是一款优秀的开源web端flv文件播放器，flv格式目前广泛应用在直播及音视频录制领域，本文就详细的介绍一下flv.js的具体使用教程，感兴趣的可以了解一下
    2023-05-05
  • 微信小程序 页面跳转传值实现代码

    微信小程序 页面跳转传值实现代码

    这篇文章主要介绍了微信小程序 页面跳转传值实现代码的相关资料,这里分析实现的条件及实例代码，需要的朋友可以参考下
    2017-07-07
  • 如何理解JavaScript模块化

    如何理解JavaScript模块化

    模块化简单来说就是将一个完整的长篇代码文件根据功能进行划分成几个文件，这些文件各自负责一个独立的功能，各个文件组合起来实现一个完整的大功能，这就是模块化，每个负责独立功能的文件就是模块。
    2021-05-05
  • js学习总结_轮播图之渐隐渐现版(实例讲解)

    js学习总结_轮播图之渐隐渐现版(实例讲解)

    下面小编就为大家带来一篇js学习总结_轮播图之渐隐渐现版(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论