<!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. Python全栈之路----三元运算

    · 三元运算又称三目运算,是对简单条件语句的简写,如: 简单条件语句: if 条件成立: val = 1 else: val = 2 改成三元运算: val = 1 if 条件成立 else 2 &g ...

  2. Python全栈之路----常用模块学习----模块的种类和导入方法

    什么是模块? 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码 ...

  3. LINUX文件删除，但磁盘空间未释放

    最近在进行系统压测,由于服务器节点太多,便写了个简单的脚本,在执行过程中发现,日志文件删除后,磁盘空间只释放了一小部分,任有大部分磁盘空间未释放. 使用lsof | grep delete命令,发现已 ...

  4. Linux 测试常用命令

    ls :列出文件 ls -l ls -t  按时间排序 ls -rt 按时间倒序 ls -a  列出所有文件(包括隐藏的) ll : ll = ‘ls -l ’ cd: 进入文件目录 cd 不带目录名 ...

  5. SQL-记录删除篇-007

    删除记录: delete * from table_name 解释:删除表中的所有数据 delete * from table_name where id<10 解释:删除表中id小于10的数据 ...

  6. psql备份和恢复（ubuntu）

    备份 sudo pg_dump -U  username  -f  filename.sql  dbname 恢复 psql -U username -f filename.sql dbname -- ...

  7. 对象属性的描述：writable、enumerable、configurable

    writable属性 writable属性是一个布尔值,决定了目标属性的值(value)是否可以被改变.如果原型对象的某个属性的writable为false,那么子对象将无法自定义这个属性. enum ...

  8. Day 09 函数基础

    函数初级 简介 # 函数是一系列代码的集合,用来完成某项特定的功能 优点 '''1. 避免代码的冗余2. 让程序代码结构更加清晰3. 让代码具有复用性,便于维护''' 函数四部分 '''1. 函数名: ...

  9. repository test has failed 错误

    这里给自己一个警告,当我在idea中准备clone gitlab上的项目时,这个链接竟然一直在报:repository test has failed 错误 这个是gitlab上复制下来的原链接:ht ...

  10. https://api.highcharts.com/gantt/

    <a href="https://api.highcharts.com/gantt/">https://api.highcharts.com/gantt/</a& ...