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打开新窗口方法整理
Feb 17 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
Vue实现简易计算器
Feb 25 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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 get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
JQuery小知识
2010/10/15 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
详解python eval函数的妙用
2017/11/16 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
Python常见数字运算操作实例小结
2019/03/22 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
英国二手物品交易网站:Preloved
2017/10/06 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
劳动工资科岗位职责范本
2014/03/02 职场文书
环保建议书作文
2014/03/12 职场文书
护士个人自我鉴定
2014/03/24 职场文书
导师推荐信范文
2014/05/09 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
开学典礼致辞
2015/07/29 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS