Rumah > hujung hadapan web > tutorial js > 比较方便的onMouseWheel缩放图片效果[原创]_图象特效

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

WBOY
Lepaskan: 2016-05-16 19:26:34
asal
1152 orang telah melayarinya
复制代码 代码如下:

  
  
  
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键然后鼠标从图片上移开,图片可恢复原始大小

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan