1. <!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>
  2.  
  3. </head>
    <body>
    <div id="father">
      <div id="box">
        <img src='./src/assets/logo.png'/>
        <div id="scale"></div>
      </div>
    </div>
  4.  
  5. </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)
  6.  
  7.       // 图形移动的边界判断
          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)
  8.  
  9.       // 设置图片的最大宽高
          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;
        }
      }
  10.  
  11. </script>
  1.  

图片的滑动缩放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. Thrift-0.10.0 CenOS 7 编译错误 error: expected ')' before 'PRIu32'

    Thrift-0.10.0 CenOS 7 编译错误 error: expected ')' before 'PRIu32' 在编译Thrift的时候,无论是Apache官网tar包,还是Github ...

  2. alpha冲刺（5/10）

    前言 队名:旅法师 作业链接 队长博客 燃尽图 会议 会议照片 会议内容 陈晓彬(组长) 今日进展: 召开会议 博客撰写 问题困扰: 我想尝试让他们自己安排明天的任务,不知道是否可行. 心得体会: 一 ...

  3. node day2 vue read html

    app.js var http = require("http"); var fs = require('fs'); var url = require('url'); http. ...

  4. Centos6.8 编译安装Apache2.4

    cetos6.8源码安装apache2.4.29 apache官网:http://httpd.apache.org 具体安装步骤: 1 配置安装apache的基础环境2 下载想要安装的版本源码包3 解 ...

  5. WPF中获取控件默认样式和模板XML

    从微软官方找这个东西甚是困难,似乎根本没有提供.网上说因为版本问题,很难找到,但通过代码却可以轻易获得.经测试,生成的样式文件非常完美,完全不用修改即可应用. 代码如下: public static ...

  6. 20165308 2017-2018-2 《Java程序设计》课程总结

    20165308 2017-2018-2 <Java程序设计>课程总结 一.每周作业及实验报告链接汇总 我期待的师生关系 学习基础和c语言调查 Linux 安装及学习 第一周学习总结 第二 ...

  7. 【代码问题】SiameseFC

    [SiameseFC]: L Bertinetto, J Valmadre, JF Henriques, et al. Fully-convolutional siamese networks for ...

  8. C# 数据库

    连接: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst ...

  9. bootstrap模态框弹框后执行Ajax

    如下: editModal:模态框ID <script> $(document).ready(function() { $('#editModal').on('hidden.bs.moda ...

  10. 常用http/https以及socks5代理总结

    代理 格式 # 设置http代理 export http_proxy= # 设置https代理 export HTTPS_PROXY= # 设置ftp代理 export FTP_PROXY= # 同时 ...