管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

[原创]比较方便的onMouseWheel缩放图片效果

复制代码 代码如下:

　　<HTML>

　　<HEAD>

　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

　　<TITLE>onMouseWheel缩放图片效果－www..Net</TITLE>

　　<body>

　　<script>

　　function bbimg(o)

　　{

　　var zoom=parseInt(o.style.zoom, 10)||100;

　　zoom+=event.wheelDelta/12;

　　if (zoom>0) o.style.zoom=zoom+'%';

　　}

　　function addthis()

　　{

　　var e=window.event?window.event:e;

　　var srcE=e.srcElement?e.srcElement:e.target;

　　if(!srcE) return;

　　//author:reterry(dxy) www.glzy8.com欢迎转载，转载时请写明出处。

　　if (String(srcE.tagName).toLowerCase()=='img'){

　　//alert('好');

　　bbimg(srcE)

　　}

　　}

　　function backthis(){

　　var e=window.event?window.event:e;

　　var srcE=e.srcElement?e.srcElement:e.target;

　　if(!srcE) return;

　　//author:reterry(dxy) www.glzy8.com欢迎转载，转载时请写明出处。

　　if ((String(srcE.tagName).toLowerCase()=='img')&&(window.event.ctrlKey)){

　　//alert('好');

　　srcE.style.zoom='100%';

　　}}

　　document.onmousewheel=addthis;

　　document.onmouseout=backthis;

　　</script>

　　<A id=ImgSpan href="http://www.glzy8.com/logos.gif" target=_blank><IMG src="http://www.glzy8.com/logos.gif" border=0></A>

　　<br>鼠标滑轮滚动查看效果，Author:reterry(dxy) www.glzy8.com欢迎转载，转载时请写明出处。<br>按住ctrl键然后鼠标从图片上移开，图片可恢复原始大小</body></html>

　　

　　 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

教程首页 更多教程