<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: aquamarine;
      position: absolute;
    }
    #father {
      width: 600px;
      height: 500px;
      background-color: rgb(226, 117, 184);
      position: relative;
    }
    img {
      width: 100%;
      height: 100%;
      cursor: move;
    }
    #scale {
      width: 10px;
      height: 10px;
      overflow: hidden;
      cursor: se-resize;
      position: absolute;
      right: 0;
      bottom: 0;
      background-color: rgb(122, 191, 238);
    }
  </style>

</head>
<body>
<div id="father">
  <div id="box">
    <img src='./src/assets/logo.png'/>
    <div id="scale"></div>
  </div>
</div>

</body>
</html>
<script type="text/javascript">
  // box是装图片的容器,fa是图片移动缩放的范围,scale是控制缩放的小图标
  var box = document.getElementById("box");
  var fa = document.getElementById('father');
  var scale = document.getElementById("scale");
  // 图片移动效果
  box.onmousedown=function(ev) {
    var oEvent = ev;
    // 浏览器有一些图片的默认事件,这里要阻止
    oEvent.preventDefault();
    var disX = oEvent.clientX - box.offsetLeft;
    var disY = oEvent.clientY - box.offsetTop;
    console.log(disX,disY)
    fa.onmousemove=function (ev) {
      oEvent = ev;
      oEvent.preventDefault();
      var x = oEvent.clientX -disX;
      var y = oEvent.clientY -disY;
      console.log(x,y)

      // 图形移动的边界判断
      x = x <= 0 ? 0 : x;
      x = x >= fa.offsetWidth-box.offsetWidth ? fa.offsetWidth-box.offsetWidth : x;
      y = y <= 0 ? 0 : y;
      y = y >= fa.offsetHeight-box.offsetHeight ? fa.offsetHeight-box.offsetHeight : y;
      box.style.left = x + 'px';
      box.style.top = y + 'px';
    }
    // 图形移出父盒子取消移动事件,防止移动过快触发鼠标移出事件,导致鼠标弹起事件失效
    fa.onmouseleave = function () {
      fa.onmousemove=null;
      fa.onmouseup=null;
    }
    // 鼠标弹起后停止移动
    fa.onmouseup=function() {
      fa.onmousemove=null;
      fa.onmouseup=null;
    }
  }
  // 图片缩放效果
  scale.onmousedown = function (e) {
    // 阻止冒泡,避免缩放时触发移动事件
    e.stopPropagation();
    e.preventDefault();
    var pos = {
      'w': box.offsetWidth,
      'h': box.offsetHeight,
      'x': e.clientX,
      'y': e.clientY
    };
    fa.onmousemove = function (ev) {
      ev.preventDefault();
      // 设置图片的最小缩放为30*30
      var w = Math.max(30, ev.clientX - pos.x + pos.w)
      var h = Math.max(30,ev.clientY - pos.y + pos.h)
      // console.log(w,h)

      // 设置图片的最大宽高
      w = w >= fa.offsetWidth-box.offsetLeft ? fa.offsetWidth-box.offsetLeft : w
      h = h >= fa.offsetHeight-box.offsetTop ? fa.offsetHeight-box.offsetTop : h
      box.style.width = w + 'px';
      box.style.height = h + 'px';
      // console.log(box.offsetWidth,box.offsetHeight)
    }
    fa.onmouseleave = function () {
      fa.onmousemove=null;
      fa.onmouseup=null;
    }
    fa.onmouseup=function() {
      fa.onmousemove=null;
      fa.onmouseup=null;
    }
  }

</script>
 

图片的滑动缩放html、css、js代码的更多相关文章

  1. Zend Studio 上 安装使用Aptana插件(html,css,js代码提示功能) .

    最近装了zend studio 9.0 用了段时间发现写html,css,js代码没提示,要开dreamwaver(对js代码提示也不好).就网上搜索了下,发现了Aptana插件,装上用了下,感觉不错 ...

  2. Submine Text3格式化HTML/CSS/JS代码

    Submine Text3格式化HTML/CSS/JS代码需要安装插件,步骤如下: 1.打开菜单--->首选项---->Package Control,输入 install package ...

  3. Sublime text 3 如何格式化HTML/css/js代码

    Sublime Text 3 安装Package Control   原来Subl3安装Package Control很麻烦,现在简单的方法来了 一.简单的安装方法 使用Ctrl+`快捷键或者通过Vi ...

  4. 记一次产品需求：图片等比缩放和CSS自适应布局16:9

    前言 前阵子,产品跑过来问我现有的模板中没有图片模板,需要添加一个图片模板:然而,他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放,并且居中展示图片.我当时想着,抛开技术实现层面, ...

  5. 图片加载完毕后执行JS代码

    $("#img").load(function(){...}); 这是jquery提供的一个方法,但是在IE中会有BUG,IE8不支持,IE9以上刷新后也不会执行,只有强制刷新才执 ...

  6. 图片攻击-BMP图片中注入恶意JS代码 <转载>

    昨天看到一篇文章<hacking throung images>,里面介绍了如何在BMP格式的图片里注入JS代码,使得BMP图片既可以正常显示, 也可以运行其中的JS代码,觉得相当有趣. ...

  7. Google HTML/CSS/JS代码风格指南

    JS版本参见:http://www.zhangxinxu.com/wordpress/2012/07/google-html-css-javascript-style-guides/ HTML/CSS ...

  8. 图片滚动（UP）的JS代码详解（offsetTop、scrollTop、offsetHeigh）【转】

    源地址 信息技术教材配套的光盘里有一段设置图片滚动的JS代码,与网络上差不多,实现思路:一个设定高度并且隐藏超出它高度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,dem ...

  9. 页面怎么引用外部css+js代码

    外部css样式:把css样式写到一个文件内,方便使用,减少冗余. 如果使用的是外部css样式,页面怎么引用: 使用 <link rel="stylesheet" type=& ...

随机推荐

  1. git的优缺点

      git可以说是世界上最先进的版本控制系统,大多语句的执行为linux语句,也不难怪,,起初他就是为了帮助开发linux开发内核而使用. 我们先来说git的主要功能,知道了这个,我们也就知道了为什么 ...

  2. vs2017 编译vue 错误 TS2307 Build:找不到模块“webpack”。

    升级了vs2017之后,编译之前正常的工程,发现出现了对vue的编译错误, 提示一些列找不到模块的错误 错误 TS2307 Build:找不到模块“webpack”. ...... 错误 TS2345 ...

  3. .net平台常用组建

    常用的一些开源组件整理: 导出Excel报表的插件:NOPI.dll(基于微软OpenXml实现)开源的作业调度和自动任务框架:Quartz.NET用于大数据搜索引擎的全文检索框架:Lucene.ne ...

  4. 寒假作业pta3

    某地老鼠成灾,现悬赏抓老鼠,每抓到一只奖励10元,于是开始跟老鼠斗智斗勇:每天在墙角可选择以下三个操作:放置一个带有一块奶酪的捕鼠夹(T),或者放置一块奶酪(C),或者什么也不放(X).捕鼠夹可重复利 ...

  5. rabbitmq management advance lesson

    rabbitmq management advance management install rabbitmq-plugins enable rabbitmq_management visit : h ...

  6. PythonStudy——字典的定义 Dictionary definition

    # 空字典 d1 = {} d2 = dict() # 用map映射创建字典 d3 = dict({'a': 1, 'b': 1}) print(d3) # 用关键字赋值方式 d4 = dict(na ...

  7. python_字符编码&格式化

    电脑最小储存单位是bit(位),8bit为一个Byte(字节), 8bit=1Byte 1024Byte=1KB 1024KB=1MB 1024MB=1GB 1024GB=1TB 编码的故事: 计算机 ...

  8. Ubuntu更新时提示错误 E: Sub-process /usr/bin/dpkg returned an error code (1)

    $ sudo su //root权限 $ sudo mv /var/lib/dpkg/info /var/lib/dpkg/info_old //现将info文件夹更名 $ sudo mkdir /v ...

  9. Batch Close process

    @echo offecho.rem Kill all chrome drivertaskkill /im chromedriver.exe /f pause

  10. linux中telnet后退出连接窗口的方法？

    linux中telnet后退出连接窗口 [root@a cron]# telnet www.baidu.com 80Trying 115.239.211.112...Connected to www. ...