| 利用网页监听，实现内容中的图片由滚轮控制缩放 |
| 2009-4-17 9:37:21 哈尔滨百姓网 来源:百度空间 浏览 次 【大 中 小】【打印】【关闭】 |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
function ZoomImg(o)
{
var zoom = parseInt(o.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;
if(zoom > 0)
o.style.zoom = zoom + '%';
return false;
}
var oEventUtil = new Object();
oEventUtil.AddEventHandler = function(oTarget,sEventType,fnHandler)
{
//IE和FF的兼容性处理
//如果是FF
if(oTarget.addEventListener){
oTarget.addEventListener(sEventType,fnHandler,false);
}
//如果是IE
else if(oTarget.attachEvent){
oTarget.attachEvent('on'+sEventType,fnHandler);
} else{
oTarget['on'+sEventType] = fnHandler;
}
};
//定义oT事件函数
var oT = function()
{
var oEvent = arguments[0];
var oTarget = oEvent.target || oEvent.srcElement;
ZoomImg(oTarget);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<img src="images/1.jpg" width="200" height="200"> <br>
<div id="div1">
<img src="images/1.jpg">
<img src="images/1.jpg" width="200" height="200">
</div>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
_div1=document.getElementById("div1");
var oPList = _div1.getElementsByTagName('img');
for(var i = 0;i<oPList.length;i++)
{
oPList[i].alt='鼠标滚轮放大/缩小图片';
//alert(oPList[i].addAttribute('alt','鼠标滚轮放大'));
//oPlist[i].addAttribute('alt','鼠标滚轮放大/缩小图片');
oEventUtil.AddEventHandler(oPList[i],'mousewheel',oT);
}
//-->
</SCRIPT>
转自：http://hi.baidu.com/ittd/blog/item/ae9c520f56efc52f6059f388.html |
|
| [责任编辑：佚名] |
|
| 【信息发布】【论坛交流】【留言反馈】【打印网页】【大 中 小】【↑顶部】 |
|
|
|
|
|
|
