<!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. arduino uno r3的数据类型

    char 一个字节,存储一个字符值.字符文字用单引号写成:'A' unsigned char 无符号,一个字节 byte 一个字节,无符号数, int 2字节,这产生-32768至32767的范围. ...

  2. python的高阶函数式编程

    首先   函数式编程≠函数编程,就跟计算机≠计算,因为计算机基于硬件,计算基于算法,所以函数式编程是倾向于算法. 高阶函数定义: 一个函数接受的这个参数,而这个参数也是一个函数,称之为高阶函数 例如: ...

  3. Announcing the Operate Preview Release: Monitoring and Managing Cross-Microservice Workflows

    转自:https://zeebe.io/blog/2019/04/announcing-operate-visibility-and-problem-solving/   Written by Mik ...

  4. 回顾ThreadLocal

    ThreadLocal作为解决特定场景下并发的一种方案,在Spring等框架及面试中经常会被问到,它是Java必须要掌握的基础知识之一. ThreadLocal类的作用是抽象线程内变量的抽象,这类对象 ...

  5. shell（3）拼写检查与词典操作

    1:Linux下,在/usr/share/dict下包含了词典文件,检查一个单词是否在词典里: #!/bin/bash #文件名:checkout.sh #检查给定的单词是否为词典中的单词 word= ...

  6. docker之 网络模式和跨主机通信

    Docker的四种网络模式Bridge模式 当Docker进程启动时,会在主机上创建一个名为docker0... Docker的四种网络模式 Bridge模式 当Docker进程启动时,会在主机上创建 ...

  7. 单源最短路径Dijkstra算法，多源最短路径Floyd算法

    1.单源最短路径 (1)无权图的单源最短路径 /*无权单源最短路径*/ void UnWeighted(LGraph Graph, Vertex S) { std::queue<Vertex&g ...

  8. Firebird 烂笔头（一）

    下载非安装版,将文件解压缩到D:\FireBird2.5下面.然后里面有.bat文件,选择自己适合的类型安装后,在服务里面会有一个firebirdserver开头的服务,右键启动. win+R,在命令 ...

  9. centos7 设置时区和时间

    1.设置时区(同步时间前先设置) timedatectl set-timezone Asia/Shanghai 2.安装组件 yum -y install ntp systemctl enable n ...

  10. C语言数组指针

    C语言中的数组指针与指针数组: ·数组指针一.区分 首先我们需要了解什么是数组指针以及什么是指针数组,如下: int *p[5];int (*p)[5];数组指针的意思即为通过指针引用数组,p先和*结 ...