软讯网络 > 网站建设 > PHP > 用鼠标滚轮实现图片缩放
【标 题】：用鼠标滚轮实现图片缩放
【关键字】：
【来 源】：http://blog.csdn.net/lqscoke/archive/2007/01/11/1480313.aspx
用鼠标滚轮实现图片缩放
<HTML>
<HEAD>
<TITLE>动态获取缩放图片的长度、宽度和显示比例</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<SCRIPT LANGUAGE="JavaScript">
<!--
//缩放对象. 调用方式: zoomObj(this)
function zoomObj(o)
{
var zoom = parseInt(o.style.zoom, 10)||100;
zoom += event.wheelDelta/12;
if (zoom>0)
{
o.style.zoom=zoom+'%';
}
return false;
}
var iOriginalWidth, iOriginalHeight; //存放图片原始长度、宽度
//动态显示图片的长度、宽度和显示比例
function dispCurrentSize()
{
var zoom = document.all.idImg.style.zoom;
zoom = eval(zoom.substring(0, zoom.length-1));
var iWidth = zoom * document.all.idImg.width;
var iHeight = zoom * document.all.idImg.height;
document.all.idPicCurrentSize.innerHTML = "图片当前大小 长：" +
Math.ceil(iWidth/100)
+ " 高：" + Math.ceil(iHeight/100) + " 显示比例：" +
Math.ceil((iWidth
/ iOriginalWidth)) + "%";
}
//显示图片原始长度、宽度
function dispOriginalSize(oImg)
{
iOriginalWidth = oImg.width;
iOriginalHeight = oImg.height;
document.all.idPicOriginalSize.innerHTML = "图片原始大小 长：" +
iOriginalWidth
+ " 高：" + iOriginalHeight;
document.all.idImg.style.zoom = "100%";
dispCurrentSize();
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<img src="http://www.baidu.com/img/logo.gif" ID="idImg"
onLoad="dispOriginalSize(this);"
onMouseWheel="zoomObj(this);dispCurrentSize();">
<div ID="idPicOriginalSize"></div><P><P>
<div ID="idPicCurrentSize"></div><P><P>
<br>
<br>
</BODY>
</HTML>
【相关文章】
没有相关文章
|