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 URL参数判断,确定菜单样式
May 31 Javascript
拉动滚动条加载数据的jquery代码
May 03 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
关于JS中的作用域中的问题思考分享
Apr 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
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
JavaScript中的其他对象
2008/01/16 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
JS求平均值的小例子
2013/11/29 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
anaconda如何查看并管理python环境
2019/07/05 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
关于Python解包知识点总结
2020/05/05 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
python 下划线的不同用法
2020/10/24 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
后勤采购员岗位职责
2013/12/19 职场文书
法制报告会主持词
2014/04/02 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
食品安全主题班会
2015/08/13 职场文书