图片拖拽缩放功能:兼容Chrome、Firefox、IE8+
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>拖拽图片demo</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<style>
.test-box {
width: 500px;
height: 400px;
border: 1px solid yellow;
overflow: hidden;
margin: 30px auto;
position: relative;
}
.test-img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="test-box">
<img class="test-img" src="http://images.669pic.com/element_psd/72/58/16/45/1c8e874b9b360550caab1a98a674cd73.jpg" alt="">
</div>
<script>
// 缩放
var imgZoom = {
init: function() {
this.zoomImage();
},
zoomImage: function() {
var _this = this;
$('.test-box').off('mousewheel').on('mousewheel', '.test-img', function(e) {
_this.mouseScroll($(this));
});
$('.test-box').off('DOMMouseScroll').on('DOMMouseScroll', '.test-img', function(e) {
_this.mouseScroll($(this), e);
});
},
mouseScroll: function($img,e) {
var e = e || window.event;
var oper = Math.max(-1, Math.min(1,(e.wheelDelta || -e.originalEvent.detail)));
var imgWidth = $img.width();
var newWidth = Math.max(350, Math.min(1200,imgWidth + (30*oper)));
var left = parseInt($img.css("left")) - (newWidth - imgWidth) / 2;
$img.css({
"width": newWidth + "px",
"left": left + "px"
})
},
}; // 拖拽
var imgDrag = function() {
var isDrag = false;
var dragTarget;
var startX, startY;
var imgPositionTop,imgPositionLeft;
var boxWidthMin, boxWidthMax, boxHeightMin, boxHeightMax;
function moveMouse(e) {
if (isDrag) {
var e = window.event || e;
var clientY = e.clientY;
var clientX = e.clientX;
if(clientY >= boxHeightMin && clientY <= boxHeightMax) {
dragTarget.style.top = imgPositionTop + clientY - startY + "px";
}
if(clientX >= boxWidthMin && clientX <= boxWidthMax) {
dragTarget.style.left = imgPositionLeft + clientX - startX + "px";
}
return false;
}
}
function initDrag(e) {
var e = window.event || e;
var dragHandle = e.srcElement;
var topElement = "HTML";
var eventBtn = e.button == 0 || e.button == 1; // 鼠标左键 while (dragHandle.tagName != topElement && dragHandle.className != "test-img") {
dragHandle = dragHandle.parentElement;
}
if (dragHandle.className == "test-img" && eventBtn) {
isDrag = true;
dragTarget = dragHandle;
imgPositionTop = parseInt(dragTarget.style.top + 0);
startY = e.clientY;
imgPositionLeft = parseInt(dragTarget.style.left + 0);
startX = e.clientX; var initVal = 50; // 防止图片拖出框内的最小边界值
var $box = $('.test-box');
boxWidthMin = $box.offset().left + initVal;
boxWidthMax = $box.offset().left + $box.width() - initVal;
boxHeightMin = $box.offset().top + initVal;
boxHeightMax = $box.offset().top + $box.height() - initVal; $(document).unbind('mousemove').bind('mousemove', moveMouse);
return false;
}
} $(document).unbind("mousedown").bind("mousedown", initDrag);
$(document).unbind("mouseup").bind("mouseup", function() {
isDrag = false;
});
}; imgZoom.init();
imgDrag();
</script>
</body>
</html>
图片拖拽缩放功能:兼容Chrome、Firefox、IE8+的更多相关文章
- Vue富文本编辑器(图片拖拽缩放)
富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很 ...
- vue在移动端使用alloyfinger手势库操作图片拖拽、缩放
最近开发一个活动需要在手机上给上传的头像加上边框.装饰,需要拖拽.手势缩放边框下的头像图片,因为是vue项目,开始尝试了vue-drag-resize这个组件,对图片拖拽支持很完美,但是无法手势缩放, ...
- Android 仿微信朋友圈发表图片拖拽和删除功能
朋友圈实现原理 我们使用 Android Device Monitor 来分析朋友圈发布图片的界面实现原理.如果需要分析其他应用的界面实现也是采用这种方法哦. 打开 Android Device Mo ...
- CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能
本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能.类似于这样: 思路 首先,要实现这样一个效果如果不要求可以拖拽,其实有非常多的办法. 将两张图片叠加在一 ...
- HTML5图片拖拽预览原理及实现
一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...
- 自制一个H5图片拖拽、裁剪插件(原生JS)
前言 如今的H5运营活动中,有很多都是让用户拍照或者上传图片,然后对照片加滤镜.加贴纸.评颜值之类的.尤其是一些拍照软件公司的运营活动几乎全部都是这样的. 博主也做过不少,为了省事就封装了一个简单的图 ...
- canvas 图片拖拽旋转之一——坐标转换translate
引言 对canvas中绘制的图片进行旋转操作,需要使用ctx.translate变换坐标系,将图片旋转的基点设为坐标系的原点,然后ctx.rotate旋转. 这个时候,因为canvas坐标系发生了旋转 ...
- HTML5多图片拖拽上传带进度条
前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载 ...
- canvas 图片拖拽旋转之二——canvas状态保存(save和restore)
引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...
随机推荐
- swift 动态设置UILabel的高度
import UIKit class ViewController3: UIViewController { override func viewDidLoad() { ...
- 2017.9.17校内noip模拟赛解题报告
预计分数:100+60+60=220 实际分数:100+60+40=200 除了暴力什么都不会的我..... T1 2017.9.17巧克力棒(chocolate) 巧克力棒(chocolate)Ti ...
- matlab中plot画图参数的设置
原文链接:http://blog.sciencenet.cn/blog-281551-573856.html 一.Matlab绘图中用到的直线属性包括: (1)LineStyle:线形 (2)Line ...
- 2D上下文
js中说明的上下文表示的意思为C++中作用域(个人理解),因此2D上下文说明的是这个2D的作用域 像素:用来描述图片清晰度的小矩阵 填充和描边 填充:context.fillStyle = " ...
- Android手机使用WIFI及USB建立FTP服务器总结
想必大家经常在PC和Android之间传输文件,并不是每次都会插USB接口进行文件传输,就算是插上USB接口,还是有个问题,那就是Android打开大容量存储模式之后,经常很多软件就会被强制停止使用, ...
- 【Codeforces Round #459 (Div. 2) A】Eleven
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 这个数列增长很快的. 直接暴力模拟看看是不是它的一项就好了 [代码] #include <bits/stdc++.h> ...
- android与C# WebService基于ksoap通信(C#篇)
1.打开VS 2013新建项目>>ASP.NET空WEB应用程序(我用的是.net 4.0) 2.在刚建立的项目上加入新建项(WebService) 这时TestService的代码例如以 ...
- LeetCode 258 Add Digits(数字相加,数字根)
翻译 给定一个非负整型数字,反复相加其全部的数字直到最后的结果仅仅有一位数. 比如: 给定sum = 38,这个过程就像是:3 + 8 = 11.1 + 1 = 2.由于2仅仅有一位数.所以返回它. ...
- CSS 类、伪类和伪元素差别具体解释
CSS中的类(class)是为了方便过滤(即选择)元素,以给这类元素加入样式,class是定义在HTML文档树中的. 可是这在一些情况下是不够用的,比方用户的交互动作(悬停.激活等)会导致元素状态发生 ...
- eclipse部署maven web项目到tomcat服务器时,没有将lib、web.xml复制过去的解决办法
我这几天在写项目的时候发现自己以前的项目能够访问,隔一段时间写的这个项目却不能够访问,没有发现代码的逻辑错,但是就是访问不了jsp页面,项目一发布就是出现404错误,后来发现原来是发布到tomcat上 ...