查看文章 |
js图片缩放效果
2009-03-03 15:26
<html> <head> <title>无标题页</title> <script language="javascript"> if (window.addEventListener) { window.addEventListener('DOMMouseScroll', wheel, false);//给firefox添加鼠标滚动事件 } //else //{ // window.onmousewheel = document.onmousewheel = wheel;//ie //} function wheel(event) { var delta = 0; var div = document.getElementById("div1"); if (!event) /**//* For IE. */ { event = window.event; } if (event.wheelDelta) { //让一个是IE //if(event.srcElement.tagName=="IMG" && div.contains(event.srcElement)) //{ //event.srcElement.width+=event.wheelDelta/15; // return false; //} } else if (event.detail) { //如果是firefox var allImg = div.getElementsByTagName("IMG"); var isThis=false;//现判断鼠标中仑的元素是不是包含在那个div里面 for(i=0;i<allImg.length;i++) { if(allImg[i]==event.target) { isThis=true; } } if(isThis && event.target.tagName=="IMG") { event.target.width=event.target.width+event.detail*12; event.returnValue = false; } } return true; } function bbimg(o) { var zoom=parseInt(o.style.zoom, 10)||100; zoom+=event.wheelDelta/12; if (zoom>0) o.style.zoom=zoom+'%'; return false; } </script> </head> <body> <form id="form1" runat="server"> <div> <div id="div1" <table class="tablebody2" style="table-layout:fixed;" border="0" width="90%"> <tr> <td> <img id="11" src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" onclick="javascript:window.open(this.src);" style="cursor: pointer;" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;" onmousewheel="return bbimg(this)" border="0" /> </td> </tr> </table> </div> </form> </body> </html> |
最近读者：
