图片缩放+拖动（html）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowImg.aspx.cs" Inherits="ShowImg" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
*
{
margin: 0;
padding: 0;
}
body
{
background: #333;
} #imgContainer
{
width: 100%;
height: 100%;
}
.positionButtonDiv
{
position: absolute;
height: 100%;
width: 50px;
z-index: 100000;
} .positionMapClass area
{
cursor: pointer;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<f:PageManager ID="PageManager1" AutoSizePanelID="RegionPanel1" runat="server" />
<f:Panel ID="RegionPanel1" runat="server" ShowBorder="false" ShowHeader="false">
<Content>
<a id="btnLeft" href="javascript:void(0);" onclick="__doPostBack('', 'img:left');">
<div id="divBtnLeft" class="positionButtonDiv" style="left: 10px; text-align: center">
<img alt="上一张" id="imgLeft" width="50px" src="res/zoom/images/left.png" />
</div>
</a><a id="btnRight" href="javascript:void(0);" onclick="__doPostBack('', 'img:right');">
<div id="divBtnRight" class="positionButtonDiv" style="right: 10px">
<img alt="下一张" id="imgright" width="50px" src="res/zoom/images/right.png" />
</div>
</a>
<div style="width: 100%">
<div id="imgContainer" style="text-align: center; vertical-align: middle; position: relative;
width: 100%; height: 100%">
<img src="res/zoom/images/1.jpg" id="imageFullScreen" style="position: absolute;
z-index: 10000; cursor: pointer;" onmousedown="mouseDown(this,event)" onmousemove="mouseMove(event)"
ondragstart="mouseStop()" onmouseup="mouseUp(event)" />
</div>
</div>
<script src="res/js/jquery.min.js" type="text/javascript"></script>
<script>
function SetImg(imgurl, imgwidth, imgheight) {
var height = document.body.clientHeight;
var width = document.body.clientWidth;
var img = document.getElementById("imageFullScreen");
img.src = imgurl;
if (imgwidth >= width && imgheight >= height) {
if ((imgwidth - width) > (imgheight - height)) {
imgheight = ((width - 10) / imgwidth) * imgheight;
imgwidth = width - 10;
}
else {
imgwidth = ((height - 10) / imgheight) * imgwidth;
imgheight = height - 10;
}
}
else if (imgwidth >= width) {
imgheight = ((width - 10) / imgwidth) * imgheight;
imgwidth = width - 10;
}
else if (imgheight >= height) {
imgwidth = ((height - 10) / imgheight) * imgwidth;
imgheight = height - 10;
} img.style.width = imgwidth + 'px';
img.style.height = imgheight + 'px';
img.style.top = ((height - imgheight) / 2) + 'px';
img.style.left = ((width - imgwidth) / 2) + 'px'; var heightindex = (height - 50) / 2;
document.getElementById("imgLeft").style.marginTop = heightindex + 'px';
document.getElementById("imgright").style.marginTop = heightindex + 'px';
// alert(img.style.zoom);
} function SetLeftRight(value) {
document.getElementById("btnLeft").style.display = value;
document.getElementById("btnRight").style.display = value;
}
</script>
<script language="javascript">
var mouseX, mouseY;
var objX, objY;
var isDowm = false; //是否按下鼠标
var imgEle = document.getElementById("imageFullScreen");
function mouseDown(obj, e) {
obj.style.cursor = "move";
objX = imgEle.style.left;
objY = imgEle.style.top;
mouseX = e.clientX;
mouseY = e.clientY;
isDowm = true;
} function mouseMove(e) { var x = e.clientX;
var y = e.clientY;
if (isDowm) {
imgEle.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";
imgEle.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px";
}
} function mouseUp(e) {
if (isDowm) {
var x = e.clientX;
var y = e.clientY; imgEle.style.left = (parseInt(x) - parseInt(mouseX) + parseInt(objX)) + "px";
imgEle.style.top = (parseInt(y) - parseInt(mouseY) + parseInt(objY)) + "px"; mouseX = x;
rewmouseY = y;
imgEle.style.cursor = "default";
isDowm = false;
}
} function mouseStop() {
window.event.returnValue = false;
}
</script>
<script type="text/javascript">
LoadPage();
function fnWheel(obj, fncc) {
obj.onmousewheel = fn;
if (obj.addEventListener) {
obj.addEventListener('DOMMouseScroll', fn, false);
} function fn(ev) {
var oEvent = ev || window.event;
var down = true; if (oEvent.detail) {
down = oEvent.detail > 0
}
else {
down = oEvent.wheelDelta < 0
} if (fncc) {
fncc.call(this, down, oEvent);
} if (oEvent.preventDefault) {
oEvent.preventDefault();
} return false;
}
} function LoadPage() {
var oImg = document.getElementById("imageFullScreen"); fnWheel(oImg, function (down, oEvent) { var oldWidth = this.offsetWidth;
var oldHeight = this.offsetHeight;
var oldLeft = this.offsetLeft;
var oldTop = this.offsetTop; var scaleX = (oEvent.clientX - oldLeft) / oldWidth; //比例
var scaleY = (oEvent.clientY - oldTop) / oldHeight; if (down) {
this.style.width = this.offsetWidth * 0.9 + "px";
this.style.height = this.offsetHeight * 0.9 + "px";
}
else {
this.style.width = this.offsetWidth * 1.1 + "px";
this.style.height = this.offsetHeight * 1.1 + "px";
} var newWidth = this.offsetWidth;
var newHeight = this.offsetHeight; this.style.left = oldLeft - scaleX * (newWidth - oldWidth) + "px";
this.style.top = oldTop - scaleY * (newHeight - oldHeight) + "px";
});
}
</script>
<!--代码部分end-->
</Content>
</f:Panel>
</form>
</body>
</html>
其中的一些代码是其他控件的，不用理会，直接看<img>标签和js就ok了
图片缩放+拖动（html）的更多相关文章
- Android----基于多触控的图片缩放和拖动代码实现
引自:http://www.codefans.net/articles/584.shtml 一个android中自定义的ImageView控制,可对图片进行多点触控缩放和拖动类,包括了对图片放大和图片 ...
- android多点触控自由对图片缩放
在系统的相册中,观看相片就可以用多个手指进行缩放. 要实现这个功能,只需要这几步: 1.新建项目,在项目中新建一个ZoomImage.java public class ZoomImageView e ...
- CSS实现图片缩放特效
今天是感恩节,祝大家感恩节快乐哦!最近天冷了,大家注意保暖哟.下面一起看看小颖写的demo吧. html代码: <!DOCTYPE html> <html> <head& ...
- HTML5 图片缩放功能
腾讯新闻上用的插件(xw.qq.com) 缩放插件scale.js (function(window, undefined) { var document = window.document, sup ...
- PHP图片裁剪_图片缩放_PHP生成缩略图
在制作网页过程中,为了排版整齐美观,对网页中的图片处理成固定大小尺寸的图片,或是要截去图片边角中含有水印的图片,对于图片量多,每天更新大量图,靠人工PS处理是不现实的,那么有没有自动处理图片的程序了! ...
- iOS开发UI篇—UIScrollView控件实现图片缩放功能
iOS开发UI篇—UIScrollView控件实现图片缩放功能 一.缩放 1.简单说明: 有些时候,我们可能要对某些内容进行手势缩放,如下图所示 UIScrollView不仅能滚动显示大量内容,还能对 ...
- UISlider显示进度(并且实现图片缩放)
图片展示效果如下: 其他没什么好说的,直接上代码: RootView.h: #import <UIKit/UIKit.h> @interface RootView : UIView @pr ...
- Android图片缩放方法
安卓开发中应用到图片的处理时候,我们通常会怎么缩放操作呢,来看下面的两种做法: 方法1:按固定比例进行缩放 在开发一些软件,如新闻客户端,很多时候要显示图片的缩略图,由于手机屏幕限制,一般情况下,我们 ...
- Android安卓开发中图片缩放讲解
安卓开发中应用到图片的处理时候,我们通常会怎么缩放操作呢,来看下面的两种做法: 方法1:按固定比例进行缩放 在开发一些软件,如新闻客户端,很多时候要显示图片的缩略图,由于手机屏幕限制,一般情况下,我们 ...
随机推荐
- Poj Roadblocks(次短路)
Description Bessie has moved to a small farm and sometimes enjoys returning to visit one of her best ...
- Android dumpsys命令的使用
Android提供的dumpsys工具能够用于查看手机中的应用程序和系统服务信息与状态,手机连接电脑后能够直接命令行运行adb shell dumpsys 查看全部支持的Service可是这样输出的太 ...
- ABP分层架构
ABP分层架构 基于DDD的现代ASP.NET开发框架--ABP系列之3.ABP分层架构 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ABP ...
- .NET中lock的使用方法及注意事项
lock就是把一段代码定义为临界区,所谓临界区就是同一时刻只能有一个线程来操作临界区的代码,当一个线程位于代码的临界区时,另一个线程不能进入临界区,如果试图进入临界区,则只能一直等待(即被阻止),直到 ...
- [转载]cookie
cookie概述 在上一节,曾经利用一个不变的框架来存储购物栏数据,而商品显示页面是不断变化的, 尽管这样能达到一个模拟 全局变量的功能,但并不严谨.例如在导航框架页面内右击,单击快捷菜单中的[刷新] ...
- 数学思想方法-分布式计算-linux/unix技术基础(3)
夹: ~表示当前用户的主文件夹 .它代表了当前文件夹 ..它代表的父文件夹 链接文件 使用不同的文件名指的是相同的数据或程序.硬链接 在相同的物理文件系统,创建一个硬链接 -bash-4.2$ fin ...
- linux_创建用户_copy远程文件_解压缩_执行
查看历史命令: history 创建用户: sudo useradd -m -s /bin/bash cph [会自动创建cph文件夹,并将才cph文件夹权限和组设为cph] 创建用户密码: pas ...
- linux_windows下配置tomcat区别 ，不同子域名映射不同 项目
windows下 均为修改tomcat/bin/server.xml 在最后 替换 注意 docBase / <Realm className="org.apache.catalina ...
- 针对不同手机系统的LBS地图定位解决方案
原文:针对不同手机系统的LBS地图定位解决方案 摘要: 针对目前的三种手机系统:Android安卓.S60塞班.IOS苹果,做出的三种不同的手机地图应用解决方案. 查阅了多数地图API对手机的支持情况 ...
- js中从blob提取二进制
文章结构: 一.所遇到的问题 二.解决方法 一. 服务器端通过websocket向浏览器端传输图片(二进制),需要根据不同的图片把图片显示在不同的位置,可行的一个方法是先把图片转化成二进制数组,再把二 ...