Heim > Web-Frontend > js-Tutorial > 比较方便的onMouseWheel缩放图片效果[原创]_图象特效

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

WBOY
Freigeben: 2016-05-16 19:26:34
Original
1152 Leute haben es durchsucht
复制代码 代码如下:

  
  
  
onMouseWheel缩放图片效果-www.jb51.Net

<script> <BR>function bbimg(o) <BR>{ <BR> var zoom=parseInt(o.style.zoom, 10)||100; <BR> zoom+=event.wheelDelta/12; <BR> if (zoom>0) o.style.zoom=zoom+'%'; <BR>} <BR>function addthis() <BR>{ <BR>var e=window.event?window.event:e; <BR>var srcE=e.srcElement?e.srcElement:e.target; <BR>if(!srcE) return; <BR>//author:reterry(dxy) www.jb51.net欢迎转载,转载时请写明出处。 <BR>if (String(srcE.tagName).toLowerCase()=='img'){ <BR>//alert('好'); <BR>bbimg(srcE) <BR>} <BR>} <BR>function backthis(){ <BR>var e=window.event?window.event:e; <BR>var srcE=e.srcElement?e.srcElement:e.target; <BR>if(!srcE) return; <BR>//author:reterry(dxy) www.jb51.net欢迎转载,转载时请写明出处。 <BR>if ((String(srcE.tagName).toLowerCase()=='img')&&(window.event.ctrlKey)){ <BR>//alert('好'); <BR>srcE.style.zoom='100%'; <BR>}} <BR>document.onmousewheel=addthis; <BR>document.onmouseout=backthis; <BR></script>
比较方便的onMouseWheel缩放图片效果[原创]_图象特效

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage