http://www.tsolong.com/demo/zoomdemo.html
下载完整实例源代码
200903051428480244.rar
源代码如下:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片随着鼠标滚轮滚动缩放 - 当前兼容（IE6,IE7,Firefox,Opera）</title>
<script type="text/javascript">
//缩放类
var zoomClass = function(o){
if (typeof(o) == "string")
o = document.getElementById(o);
if (document.attachEvent)
o.attachEvent("onmousewheel", func);
else
o.addEventListener("DOMMouseScroll", func, false);
function func(e){
if (e.target) {
var oWidth = e.target.width;
var width = e.target.width + e.detail * 12;
var height = oWidth / (width - oWidth);
height = e.target.height / height;
height = e.target.height + height;
if (width > 0 && height > 0) {
e.target.width = width;
e.target.height = height;
}
}
else {
e = window.event;
var currentZoom = parseInt(o.style.zoom, 10) || 100;
currentZoom += event.wheelDelta / 12;
if (currentZoom > 0)
o.style.zoom = currentZoom + '%';
}
return false;
}
}
//页面加载完成
window.onload = function(){
//调用传入需要缩放的图片的id
zoomClass("zoomImg1")
zoomClass("zoomImg2")
zoomClass("zoomImg3")
zoomClass("zoomImg4")
zoomClass("zoomImg5")
}
</script>
</head>
<body>
<h3>图片随着鼠标滚轮滚动缩放 - 当前兼容（IE6,IE7,Firefox,Opera）</h3>
<address>By:<a href="http://www.tsolong.com" target="_blank">TsoLong</a></address>
<address><a href="http://www.tsolong.com/post/523.html" target="_blank">http://www.tsolong.com/post/523.html</a></address>
<p><img id="zoomImg1" width="190" height="130" src="http://www.tsolong.com/upload/2009/2/200902262219474267.jpg"></p>
<p><img id="zoomImg2" width="190" height="130" src="http://www.tsolong.com/upload/2009/2/200902262219250523.jpg"></p>
<p><img id="zoomImg3" width="190" height="130" src="http://www.tsolong.com/upload/2009/2/200902262220006610.jpg"></p>
<p><img id="zoomImg4" width="190" height="130" src="http://www.tsolong.com/upload/2009/2/200902262220124114.jpg"></p>
<p><img id="zoomImg5" width="190" height="130" src="http://www.tsolong.com/upload/2009/2/200902262220234170.jpg"></p>
</body>
</html>
