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


Posted in Javascript onMay 14, 2019

本文实例讲述了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 相关文章推荐
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
javascript每日必学之多态
Feb 23 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
fastadmin中调用js的方法
May 14 #Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 #Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 #Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 #Javascript
详解jenkins自动化部署vue
May 14 #Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 #Javascript
JavaScript如何实现元素全排列实例代码
May 14 #Javascript
You might like
输出控制类
2006/10/09 PHP
php 无限分类的树类代码
2009/12/03 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
微信小程序实现打卡签到页面
2020/09/21 Javascript
Python守护线程用法实例
2017/06/23 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
wxpython绘制音频效果
2019/11/18 Python
python 伯努利分布详解
2020/02/25 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
应届生体育教师自荐信
2013/10/03 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
小学校园广播稿
2015/08/18 职场文书
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js