<!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 查找目录下 文件名中含有某字符串的文件

    有坑的地方: 如果代码写成这样: [( os.path.abspath(x)) for x in os.listdir(startPath) ] 此代码只能用于当前目录下,listdir列出的都只是文 ...

  2. python 进程池的使用和坑

    from multiprocessing import Pool,Process import time,os def Foo(a):#创建函数 time.sleep(2) print('in the ...

  3. centos 7 下 nginx 1.10.3 编译安装的方法

    安装所需环境 Nginx 是 C语言 开发,建议在 Linux 上运行,当然,也可以安装 Windows 版本,本篇则使用 CentOS 7 作为安装环境. 一. gcc 安装安装 nginx 需要先 ...

  4. 一篇关于CountDownLatch的好文章

    CountDownLatch简介 CountDownLatch是一种java.util.concurrent包下一个同步工具类,它允许一个或多个线程等待直到在其他线程操作执行完成. 使用场景: 在开发 ...

  5. PythonStudy——编程基础 Python Primary

    1.什么是编程语言 语言:  一个事物与另外一个事物沟通的介质 .编程语言是程序员与计算机沟通的介质. 编程: 将人类内识别的语言转化为机器能识别的指令,这种过程就叫做编程. 注:最终这些指令会被转化 ...

  6. sed用法说明

    sed介绍 sed:stream editor 是一个行编辑器,或叫流编辑器,每次处理一行,处理完一行再处理下一行.sed并不直接处理源文件,而是读取一行后放入模式空间(patten space)里, ...

  7. docker centos7创建consul镜像以及用docker-compose启动镜像

    直接贴代码了: Dockfile: # Version 0.1 FROM kuba_centos7 MAINTAINER kuba si812cn@163.com # This is the rele ...

  8. Java8-dateTimeFormatter

    时间格式化LocalDate,DateTimeFormatter--->parse,ofParttern 伴随lambda表达式.streams以及一系列小优化,Java 8 推出了全新的日期时 ...

  9. [转]jvm调优-命令大全（jps jstat jmap jhat jstack jinfo）

    运用jvm自带的命令可以方便的在生产监控和打印堆栈的日志信息帮忙我们来定位问题!虽然jvm调优成熟的工具已经有很多:jconsole.大名鼎鼎的VisualVM,IBM的Memory Analyzer ...

  10. Python【每日一问】01

    问:深拷贝.浅拷贝.直接赋值的区别是什么?并举例说明 1.区别 (1)直接赋值:对象的引用 (2)浅拷贝(copy):拷贝父对象,不会拷贝对象的内部的子对象 (3)深拷贝(deepcopy): cop ...