图片缩放+拖动（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:按固定比例进行缩放 在开发一些软件,如新闻客户端,很多时候要显示图片的缩略图,由于手机屏幕限制,一般情况下,我们 ...
随机推荐
- typedef和define具体的具体差异
1) #define这是一个预处理指令,简单的更换当预处理程序.不检查的正确性,仍不能正常关机进入的意思,那里只是已被展开时编译源代码会发现可能的错误和错误. 例如: #define PI 3.1 ...
- js日期操作
1.最基本的日期操作 var mydate = new Date(); set/get FullYear,Month,Date,Hour,Minutes,Second可以随意拼接 toLocale ...
- [ACM] POJ 3061 Subsequence (仿真足）
Subsequence Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8403 Accepted: 3264 Descr ...
- Com组件的内存分配和释放，CredentialProvider SHStrDup 字符串拷贝问题
一.简单介绍 熟悉CredentialProvider的同学应该知道,他为一个Com组件,于是,在这里的内存分配(字符串拷贝)的一系列操作就要依照con的标准来. 二.Com组件的内存分配和释放 CO ...
- 内置在虚拟机上64位操作系统：该主机支持 Intel VT-x，但 Intel VT-x 残
VT-Virtual Technology. 在这里特别说一下:虚拟64位操作系统,须要特别在BIOS中打开VT支持.怎样提示:此主机不支持Intel VT-x,则不可能虚拟出64位系统. 当提示:此 ...
- java学习笔记2——Eclipse的安装及汉化图解
Eclipse的安装 有了JDK,你可以编译Java源码,运行Java程序,但是还没有代码编辑器,没有版本管理工具,也不能方便的管理工程文件,不能与团队协作.安装Eclipse,你才能完成这些工作. ...
- SVN & Git （一）
(一)SVN的使用.CornerStone图形化管理工具! SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS. ...
- cocos2d-x 颜色
ccBlendFunc cbl = {GL_SRC_ALPHA, GL_ONE}; Sprite *sprite = Sprite::create("128_00002.png") ...
- C# - Recommendations for Abstract Classes vs. Interfaces
The choice of whether to design your functionality as an interface or an abstract class can somet ...
- oracle中导入导出数据备份数据库
原文:oracle中导入导出数据备份数据库 数据库所在位置 将数据导出到的文件名 用户名 备份数据库 :exp c ...