<!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. 本地maven库导入架包

    mvn install:install-file -DgroupId=com.alipay -DartifactId=sdk-java -Dversion=20170725114550 -Dpacka ...

  2. AutoHotKey (AHK) 按键表+自定义快捷键简化操作的教程

    自定义快捷键简化操作的教程 ① 下载安装AutoHotKey,并用记事本新建一个MyHotKey.ahk文件,录入如②中信息 ② 下图可以实现,按F6即可触发“Ctrl+C”的复制快捷键,同理F7可实 ...

  3. Js强制转换

    Js强制转换 ParseInt(a,b):整型 只能放字符串,b为基数.声明前面的数是几进制.因为只能放字符串,所以无论放什么都转换为字符串: 如果String以0x开头则为16进制的整数: ‘036 ...

  4. python 3.5 import theano ::hypot error

    # win10 , mingw(nuwen,g++ 6.3), python 3.5 , 描述: import theano 时生成动态的 mod.cpp ,然后编译库的时候报 ::hypot 未定义 ...

  5. 使用centos7构建本地git服务器

    git的安装非常简单 直接yum install git -y即可 大概看一下我的执行步骤吧 首先在服务器上执行以下操作,完成创建仓库 mkdir -p /data/test/bp.git #创建仓库 ...

  6. ajax请求完成执行的操作

    var createAjax = $("#createId").ajax(function(){ //ajax操作 }); $.when(createAjax).done(func ...

  7. centos7.4 64位安装 google-chrome 与 chromedriver 运行 Python selenium 项目

    centos7.4 实例 利用 yum 命令安装 google-chrome 超级简单(安装最新版): yum install https://dl.google.com/linux/direct/g ...

  8. MySQL Point in Time Recovery the Right Way

    In this blog, I’ll look at how to do MySQL point in time recovery (PITR) correctly. Sometimes we nee ...

  9. 5、在Dreamweaver cc 2017中添加服务器扩展组件

    Adobe DW CC 2015对HTML5.CSS3.jQuery.jQuery UI都有很好的支持,无奈这个版本却未提供开发动态网站所需要的服务器行为面板.数据库面板以及绑定面板等.要添加这个面板 ...

  10. Python3 练习2 列表和字典练习

    找出列表list中大于100的值,给字典dic的k1键,小于等于100的值,给字典dic的k2键 ''' 提示:创建字典的两种方式 ex: ''' v1 = [2,3,4,5,] v2 = 88 di ...