鼠标滚轮控制图片大小。

收集一段鼠标滚轮控制图片大小的代码.兼容浏览器
来自:http://blog.csdn.net/muxrwc/archive/2007/08/01/1721227.aspx

  1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
  2 < html  xmlns ="http://www.w3.org/1999/xhtml" >
  3 < head >
  4 < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
  5 < title > 滚动效果 </ title >
  6 < script  type ="text/javascript" >
  7(function (bool) {
  8//兼容FF一些方法
  9    window.FF = bool;
 10    
 11    if (bool) {
 12    
 13        window.attachEvent = document.attachEvent = window.HTMLElement.prototype.attachEvent = function (property, func, bool) {
 14            //兼容attachEvent方法
 15            return this.addEventListener(property.replace(/^on/""), func, bool || false);
 16        }
;
 17
 18        window.__defineGetter__("event"function () {
 19        //兼容Event对象
 20            var o = arguments.callee;    
 21            
 22            do {
 23                if (o.arguments[0instanceof Event) return o.arguments[0];            
 24            }
 while (o = o.caller);
 25            
 26            return null;
 27        }
);
 28        
 29        Event.prototype.__defineGetter__("srcElement"function () {
 30        //兼容Event.srcElement对象
 31            return this.target;
 32        }
);
 33        
 34        MouseEvent.prototype.__defineGetter__("wheelDelta"function () {
 35        //返回鼠标滚轮状态
 36            return this.detail * -1;
 37        }
);
 38    }

 39    
 40}
)(/Firefox/.test(window.navigator.userAgent));
 41
 42var Class = {
 43//创建类
 44    create : function () {
 45        return function () {
 46            this.initialize.apply(this, arguments);
 47        }
;
 48    }

 49}
;
 50
 51var $ = function (id) {
 52    return "string" == typeof id ? document.getElementById(id) : id;
 53}
;
 54
 55var wheel = Class.create();
 56
 57wheel.prototype = {
 58//鼠标滚动图片类
 59    initialize : function (obj, num) {
 60    //初始化参数
 61        var wc = this;
 62        (wc.img = obj).attachEvent(!window.FF ? "onmousewheel" : "DOMMouseScroll"function () {
 63            wc.move(num * (window.event.wheelDelta > 0 ? -1 : 1));
 64        }
);
 65        
 66        wc.item = [        
 67            [ obj.offsetWidth, "width""offsetWidth" ], [ obj.offsetHeight, "height""offsetHeight" ]
 68        ].sort(function (a, b) return b[0- a[0]; }); //把高和宽从大到小排序
 69    }
,
 70    
 71    move : function (num) {
 72    //改变值
 73        var wc = this, img = wc.img, a = wc.item;
 74        
 75        //大值除以小值在乘以固定值就是比例缩放
 76        img.style[a[0][1]] = Math.max(
 77            img[a[0][2]] + Math.round(a[0][0/ a[1][0* num), a[0][0]
 78        ) + "px";
 79        //小值不用管
 80        img.style[a[1][1]] = Math.max(
 81            img[a[1][2]] + num, a[1][0]
 82        ) + "px";
 83    }

 84    
 85}
;
 86
 87window.attachEvent("onload"function () {
 88    var wc = new wheel($("div"), 10);
 89    
 90    $("a").onclick = function () {
 91        wc.move(50);
 92    }
;
 93    
 94    $("b").onclick = function () {
 95        wc.move(-50);
 96    }
;
 97}
);
 98
</ script >
 99 </ head >
100 < body >
101 < img  id ="div"  height ="60"  width ="280"  src ="http://hi.csdn.net/images/csdnlogo.gif"  alt =""   />
102 < br  />
103 < input  id ="a"  type ="button"  value ="加"   /> &nbsp; < input  id ="b"  type ="button"  value ="减"   />
104 </ body >
105 </ html >  
106
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值