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 相关文章推荐
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
php多重接口的实现方法
2015/06/20 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
PHP学习记录之数组函数
2018/06/01 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
JS中showModalDialog 的使用解析
2013/04/17 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
python实现数据分析与建模
2019/07/11 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
2014年3.15团委活动总结
2014/03/16 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
小学生成绩单评语
2014/12/31 职场文书
2015教师年度考核评语
2015/03/25 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
Python制作动态字符画的源码
2021/08/04 Python
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android