当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 比较方便的onMouseWheel缩放图片效果 原创

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

2019年08月02日  | 移动技术网IT编程  | 我要评论
复制代码 代码如下:

<html>  
<head>  
<meta http-equiv="content-type" content="text/html; charset=gb2312">  
<title>onmousewheel缩放图片效果－www.jb51.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.jb51.net欢迎转载，转载时请写明出处。
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.jb51.net欢迎转载，转载时请写明出处。
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.lhsxpumps.com/html/_images/10qianwan/20171212/b_1_201712122057218039.jpg" target=_blank><img src="http://www.lhsxpumps.com/_images/10qianwan/20171212/b_1_201712122057218039.jpg" border=0></a>
<br>鼠标滑轮滚动查看效果，author:reterry(dxy) www.jb51.net欢迎转载，转载时请写明出处。<br>按住ctrl键然后鼠标从图片上移开，图片可恢复原始大小</body></html>


[ctrl+a 全选 注:如需引入外部js需刷新才能执行]

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网