图片缩放+拖动（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:按固定比例进行缩放 在开发一些软件,如新闻客户端,很多时候要显示图片的缩略图,由于手机屏幕限制,一般情况下,我们 ...
随机推荐
- 向西项目管理工具Maven一片
前言 相信仅仅要做过 Java 开发的童鞋们,对 Ant 想必都不陌生,我们往往使用 Ant 来构建项目,尤其是涉及到特别繁杂的工作量.一个 build.xml 可以完毕编译.測试.打包.部署等非常多 ...
- NYOJ 904 search（stable_sort函数的应用）
描述 游戏积分的排行榜出来了,小z想看看得某个积分的人是谁.但是由于人数很多,他自己找很浪费时间,所以他想请你帮忙写一个程序,能快速的帮他找到他想要找的人 输入 多组测试数据,第一行有一个数T,表 ...
- OOP 创建对象的7种方式
JavaScript OOP 创建对象的7种方式 我写JS代码,可以说一直都是面向过程的写法,除了一些用来封装数据的对象或者jQuery插件,可以说对原生对象了解的是少之又少.所以我拿着<J ...
- 国外android开源站点
http://android-arsenal.com/
- codeigniter 操作mysql的PHP代码--更新
支持标准前缀 1)查询没有平等,有平等的 $this->db->get_where('host',array('host'=>'ddd','id !='=>0))->ro ...
- Socket 学习（三）.1 tcp 通讯
实现了,局域网客户端 对客户端 的通讯. 实际上这是 一个 客户端 兼 服务端 . 2个阿里云服务器测试 效果图: 本地效果图: using System; using System.Collecti ...
- 常用批处理命令总结3之Find和FindStr
原文:常用批处理命令总结3之Find和FindStr find 作用:从文件中收索字符串 格式:find 参数 "字符串" 路径\文件名 参数: /V 显示所有未包含指定字符串的行 ...
- 使用IntelliLock加密授权你的.Net程序
原文:使用IntelliLock加密授权你的.Net程序 转自:http://www.nsoff.com/post/2012/05/23/%E4%BD%BF%E7%94%A8IntelliLock%E ...
- CORS跨域资源共享
CORS(跨域资源共享)跨域问题及解决 当使用ajax跨域请求时,浏览器报错:XmlHttpRequest error: Origin null is not allowed by Access-Co ...
- curl_setopt(): CURLOPT_FOLLOWLOCATION cannot be activated when in safe_mode or an open_basedir is set in
当系统开启safe_mode和 open_basedir,在程序中使用以下语句 curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1); 并且遇到301,302状态 ...