图片缩放+拖动（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:按固定比例进行缩放 在开发一些软件,如新闻客户端,很多时候要显示图片的缩略图,由于手机屏幕限制,一般情况下,我们 ...
随机推荐
- Stopwatch计时器、秒表 C#
.NET2.0也提供了这样一个秒表:Stopwatch类,它可以比较精确地测量时间. 速度测试: 软件的性能和可测性是一个复杂的主题.要确保应用程序能够满足用户的期望,就需要在开发周期内考虑它的性能和 ...
- 10个devexpress ASPxPivotGrid常见问题
原文:10个devexpress ASPxPivotGrid常见问题 1.DXperience ASPxGridView如何开启lightweight模式 描述:ASPxGridView样式主题中pa ...
- 从头学起android<GridView网格视图.二十八.>
GridView基于组件的网络格所有的形式的组分的,例如:当制作专辑,所有的图片将在相同的尺寸在不同的显示格在孩子,是否能够依靠这个组件完成.此组件的继承结构参见例如下面: java.lang.Obj ...
- poj 3744 Scout YYF I （可能性DP+矩阵高速功率）
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 5062 Accepted: 1370 Description YYF i ...
- crawler_如何从页面获取新浪cookie
步奏如下: 1 用chrome浏览器(其他浏览器原理相同)打开地址: http://weibo.com/ 2.点击鼠标右键 右键点击查看元素 点击Network 3.输入用户名 密码 执行登录 ...
- Oracle缓存机制
- hbase ganglia监控配置
hbase ganglia 显示器 hbase 构造 hadoop-metrics2-hbase.properties *.sink.ganglia.class=org.apache.hadoop.m ...
- Lucene.Net简介和分词
Lucene.net站内搜索—2.Lucene.Net简介和分词 2015-03-24 23:10 by 邹琼俊, 118 阅读, 1 评论, 收藏, 编辑 Lucene.Net简介 Lucene.N ...
- Python学习笔记：概要
1.print不同的互动解释语句输出和输出 在以下示例,我们分配字符串值到可变myString.先用print 要显示一个变量的内容, 其次是变量名,以显示. >>> myStrin ...
- ResultSet取结果集多少条记录方法及分页概要
allst=toconn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY); allsql = ...