注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

樱之花

叶散的时候,你明白欢聚;花谢的时候,你明白青春.

 
 
 

日志

 
 
关于我

分类中“我的实验室”是我在日常工作中的一些知识总结,有些写的比较匆忙,可能大家在阅读时会产生困扰,后期有时间我会重新整理编辑,谢谢大家的到访,您们的支持是我前进的动力!

网易考拉推荐

JS鼠标在图片上滚动放大或者缩小图片的代码(javascript)  

2010-01-28 15:22:23|  分类: JS程式 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<HTML>
<HEAD>


<TITLE>onMouseWheel Event Sample</TITLE>

<!-- <LINK REL="stylesheet" HREF="/workshop/basicSDKIE4.css" TYPE="text/css"> -->

<STYLE>
BODY{}{
background:#FFFFFF;
color:black;
font-size:.75em;
font-family:verdana;
}
H1 {}{
color:#3366CC;
font-size:1.5em;
}
IMG {}{
    border:2px solid #000000;
    margin:10px;
}
A {}{
color:#3366CC;
text-decoration:none;
}  
</STYLE>
<SCRIPT>
var count = 10;

function Picture()
{
count = Counting(count);
Resize(count);
return false;
}

function Counting(count){  
        if (event.wheelDelta >= 120)
                count++;
        else if (event.wheelDelta <= -120)
                count--;  
   return count;
}
function Resize(count){
   
       oImage.style.zoom = count + '0%';
    oCounter.innerText = count + '0%';   
}
</SCRIPT>

</HEAD>
<!--TOOLBAR_START-->
<!--TOOLBAR_EXEMPT-->
<!--TOOLBAR_END-->
<BODY>

<h1>onmousewheel event</h1>
<P>
This sample uses the onmousewheel event to expand or contract the picture below. <br><br>

Move the cursor over the picture and roll the mouse wheel up and down.</P>
<span style="font-weight:bold">Size =
<span id="oCounter" style="color:red;">100%</span></span>
<br>
<img id="oImage" src="http://hiphotos.baidu.com/xieqingx/pic/item/ebb8dd95e82bd84cd1135e9e.jpg" onmousewheel="return Picture();" >

<br>
<br>
<br>
<A CLASS="clsIncCpyRt" HREF="http://www.microsoft.com/isapi/gomscom.asp?TARGET=/info/cpyright.htm" TARGET="_top">&copy; 2006 Microsoft Corporation. All rights reserved. Terms of use</A>.
</BODY>
</HTML>
  评论这张
 
阅读(2823)| 评论(5)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017