比较方便的onMouseWheel缩放图片效果 <font color=red>原创</font>_Javascript教程-查字典教程网
比较方便的onMouseWheel缩放图片效果 原创
比较方便的onMouseWheel缩放图片效果 原创
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:onMouseWheel缩放图片效果-www.jb51.Netfunctionbbimg(o){varzoom=parse...

复制代码 代码如下:

<HTML>

<HEAD>

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

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

<body>

<script>

functionbbimg(o)

{

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

zoom+=event.wheelDelta/12;

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

}

functionaddthis()

{

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

varsrcE=e.srcElement?e.srcElement:e.target;

if(!srcE)return;

//author:reterry(dxy)www.jb51.net欢迎转载,转载时请写明出处。

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

//alert('好');

bbimg(srcE)

}

}

functionbackthis(){

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

varsrcE=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>

<Aid=ImgSpanhref="http://www.jb51.net/logos.gif"target=_blank><IMGsrc="http://www.jb51.net/logos.gif"border=0></A>

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

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

鼠标滑轮滚动查看效果,Author:reterry(dxy) www.jb51.net欢迎转载,转载时请写明出处。

按住ctrl键然后鼠标从图片上移开,图片可恢复原始大小

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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类