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 相关文章推荐
深入认识javascript中的eval函数
Nov 02 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
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模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
javascript 函数调用规则
2009/08/26 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
指针和引用有什么区别
2013/01/13 面试题
学校安全责任书
2014/04/14 职场文书
合作协议书怎么写
2014/04/18 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
2014年女职工工作总结
2014/11/27 职场文书
工作表扬信
2015/01/17 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS