您的位置：首页 > Web前端 > HTML
图片缩放+拖动（html）

2015-11-30 12:04 603 查看
<%@ 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了
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航