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弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
简单实现js上传文件功能
Aug 21 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
使用JavaScript破解web
Sep 28 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
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
国内php原创论坛
2006/10/09 PHP
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
discuz的php防止sql注入函数
2011/01/17 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
php中的strpos使用示例
2014/02/27 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
python实现可变变量名方法详解
2019/07/01 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
了解AppleTalk协议吗
2014/04/01 面试题
师范毕业生个人求职信
2013/12/09 职场文书
马智宇结婚主持词
2014/04/01 职场文书
实习公司领导推荐函
2014/05/21 职场文书
2014年底工作总结
2014/12/15 职场文书
销售员自我评价
2015/03/11 职场文书
防震减灾主题班会
2015/08/14 职场文书
2016十一国庆节感言
2015/12/09 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript