读者的进步速度远大于博客的进步速度。
2010年02月5日TeamWork

没有评论
33 views

CutePsWheel javascript libary:控制输入文本框为可使用滚轮控制的js库.

Plugin Name : CutePsWheel javascript libary:控制输入文本框为可使用滚轮控制的js库.
Author : walkingp

Blog : http://www.51obj.cn/
欢迎投递你的插件,投递地址 :
http://www.cssrain.cn/demo/1/mail.html
或者发送到
CssRain@gmail.com

CutePsWheel javascript libary
简介:
用于控制输入数字类型文本框实现鼠标滚轮上下滑动改变值,支持正整数、小数类型输入文本。
   * 兼容IE/Firefox/Opera/Safari/Chrom
   * 可定义滚动变化间隔值,支持整数、浮点数
   * 双击恢复初始值
   * 仅3.92K,压缩后2.67K
预览:http://www.51obj.cn/demo/js/CutePsWheel/demo.html
下载:http://www.51obj.cn/demo/js/CutePsWheel/cutePsWheel_0_9_1.js
演示代码:http://www.51obj.cn/demo/js/CutePsWheel/cutePSWheel.rar

jQuery版本:
http://cssrain.cn/demo/jsWheel/demo2.html    

2010年02月4日TeamWork

没有评论
46 views

JavaScript单元测试工具 — QUnit。

Plugin Name : 动态增加input
Author : oncoding

Blog : http://www.oncoding.cn/
欢迎投递你的插件,投递地址 :
http://www.cssrain.cn/demo/1/mail.html
或者发送到 CssRain@gmail.com

文档:http://docs.google.com/View?id=dft4vhq9_33gd3zhwf6

js中鼠标滚轮事件详解.

之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用js对鼠标滚轮事件进行控制,滚轮事件其中考虑浏览器兼容性问题
附加事件
其中经我测试,IE/Opera属于同一类型,使用attachEvent即可添加滚轮事件。
   /*IE注册事件*/
   if(document.attachEvent){
   document.attachEvent('onmousewheel',scrollFunc);
   }
Firefox使用addEventListener添加滚轮事
   /*Firefox注册事件*/
   if(document.addEventListener){
       document.addEventListener('DOMMouseScroll',scrollFunc,false);
   }
Safari与Chrome属于同一类型,可使用HTML DOM方式添加事件
   window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
其中除Firefox外其余均可使用HTML DOM方式添加事件,因此添加事件使用以下方式
   /*注册事件*/
   if(document.addEventListener){
       document.addEventListener('DOMMouseScroll',scrollFunc,false);
   }//W3C
   window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
detail与wheelDelta
判断滚轮向上或向下在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个值,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下。
   <p><label for="wheelDelta"> 滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta" /></p>
   <p><label for="detail"> 滚动值:(Firefox)</label><input type="text" id="detail" /></p>
   <script type="text/javascript">
   var oTxt=document.getElementById("txt");
   /***********************
   * 函数:判断滚轮滚动方向
   * 作者:walkingp
   * 参数:event
   * 返回:滚轮方向 1:向上 -1:向下
   *************************/
   var scrollFunc=function(e){
       var direct=0;
       e=e || window.event;
       var t1=document.getElementById("wheelDelta");
       var t2=document.getElementById("detail");
       if(e.wheelDelta){//IE/Opera/Chrome
           t1.value=e.wheelDelta;
       }else if(e.detail){//Firefox
           t2.value=e.detail;
       }
       ScrollText(direct);
   }
   /*注册事件*/
   if(document.addEventListener){
       document.addEventListener('DOMMouseScroll',scrollFunc,false);
   }//W3C
   window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari
   </script>
预览效果http://www.51obj.cn/demo/js/wheelDelta_detail.html
(部分图片见原文:http://www.51obj.cn/?p=637
(以上内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ 

2010年02月3日TeamWork

没有评论
46 views

js 仿Photoshop鼠标滚轮控制输入框值.

  







  

Plugin Name : js 仿Photoshop鼠标滚轮控制输入框值
Author : walkingp

Blog : http://www.51obj.cn/
欢迎投递你的插件,投递地址 :
http://www.cssrain.cn/demo/1/mail.html
或者发送到
CssRain@gmail.com

 一直很想做这个效果,原理是监听鼠标滚轮事件;可将此效果继续发散到其他应用上,如图片缩放,页面缩放等。
已经ff、ie、opera测试,但chrome尚不通过。
查看效果 http://www.51obj.cn/demo/js/wheel.html
                  http://cssrain.cn/demo/jsWheel/demo1.html    

jQuery版本:
                  http://cssrain.cn/demo/jsWheel/demo2.html    

2010年02月2日TeamWork

没有评论
32 views

jQuery api plugin for Google Chrome.

把小飞的jQuery1.4API简单的做成了一个google浏览器的插件,方便大家查阅。

插件下载:
https://chrome.google.com/extensions/detail/ibnnamfohbhmflccioindjabjidiehib

其他插件下载:
https://chrome.google.com/extensions?hl=zh-cn

新手上路:
http://code.google.com/chrome/extensions/getstarted.html

返回顶部