Javascript开发常用脚本学习笔记---Update3

本次为大家演示如何通过javascript的onmousewheel事件实现图片的滚动缩放功能：

看演示效果：

缩放前:

缩放后：

前台Html：

  
  

   
   <%
   
   @ Page Language
   
   =
   
   "
   
   C#
   
   "
   
    AutoEventWireup
   
   =
   
   "
   
   true
   
   "
   
    CodeFile
   
   =
   
   "
   
   Default.aspx.cs
   
   "
   
    Inherits
   
   =
   
   "
   
   _Default
   
   "
   
    
   
   %>
   
   


   
   <!
   
   DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
   
   >
   
   


   
   <
   
   html 
   
   xmlns
   
   ="http://www.w3.org/1999/xhtml"
   
   >
   
   

   
   <
   
   head 
   
   runat
   
   ="server"
   
   >
   
   
 
   
   <
   
   title
   
   ></
   
   title
   
   >
   
   
 
   
   <
   
   script 
   
   type
   
   ="text/javascript"
   
    language
   
   ="javascript"
   
   >
   
   
 
   
   function
   
    changeSize(img) {
 
   
   //
   
   获取图片的zoom样式属性 如果zoom样式不存在 即100
   
   

   
    
   
   var
   
    zoom 
   
   =
   
    parseInt(img.style.zoom, 
   
   10
   
   ) 
   
   ||
   
    
   
   100
   
   ;
 
   
   //
   
   根据滚轮的滚动值
   
   

   
    zoom 
   
   +=
   
    event.wheelDelta 
   
   /
   
    
   
   12
   
   ;
 
   
   //
   
   判断zoom值是否大于0 zoom小于0图片无法显示
   
   

   
    
   
   if
   
    (zoom 
   
   >
   
    
   
   0
   
   )
 img.style.zoom 
   
   =
   
    zoom 
   
   +
   
    
   
   "
   
   %
   
   "
   
   ;
 
 
   
   //
   
   禁止触发滚轮滚动的默认事件
   
   

   
    
   
   return
   
    
   
   false
   
   ;
 }
 
   
   </
   
   script
   
   >
   
   

   
   </
   
   head
   
   >
   
   

   
   <
   
   body
   
   >
   
   
 
   
   <
   
   form 
   
   id
   
   ="form1"
   
    runat
   
   ="server"
   
   >
   
   
 
   
   <
   
   div
   
   >
   
   
 
   
   <
   
   img 
   
   src
   
   ="Images/Chinese_painting.jpg"
   
    onmousewheel
   
   ="return changeSize(this)"
   
    
   
   />
   
   
 
   
   </
   
   div
   
   >
   
   
 
   
   </
   
   form
   
   >
   
   

   
   </
   
   body
   
   >
   
   

   
   </
   
   html
   
   >
  
  

其实主要就是通过上述function函数实现访问文件夹下的图片出发鼠标的滚轮实现缩放效果：

直接在div层实习图片的javascript滚动事件：

<img src="Images/Chinese_painting.jpg" onmousewheel="return changeSize(this)" />