码迷,mamicode.com
首页 > 其他好文 > 详细

myQuery

时间:2014-12-13 19:15:21      阅读:566      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   os   使用   sp   

下面的这些简单的框架见证了我自学js的过程

充满了艰辛和不易,也感谢群里的热心人的支持和资料

虽然现在看着比较少,或者大神们觉得有点菜,但是这是成长的过程

等到个人理解和掌握的函数比较多的时候,我就自己建立一个框架,属于我自己的框架,自己的query

加入收藏

bubuko.com,布布扣
 1 function AddFavorite(sURL, sTitle) {
 2     try {
 3         window.external.addFavorite(sURL, sTitle);
 4     } catch (e) {
 5         try {
 6             window.sidebar.addPanel(sTitle, sURL, "");
 7         } catch (e) {
 8             alert("Add to Favorites failed, please use Ctrl+D to add!");
 9         }
10     }
11 }
View Code

设为主页

bubuko.com,布布扣
 1 function SetHome(obj,vrl){
 2     try{
 3         obj.style.behavior=‘url(#default#homepage)‘;obj.setHomePage(vrl);
 4     }
 5     catch(e){
 6         if(window.netscape) {
 7             try {
 8                 netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
 9             }
10             catch (e) {
11                 alert("This operation is the browser to refuse!"+‘\n‘+"Please in the browser address bar enter“about:config”And press enter."+‘\n‘+"Then [signed.applets.codebase_principal_support]The value is set to‘true‘, you can double-click。");
12             }
13             var prefs = Components.classes[‘@mozilla.org/preferences-service;1‘].getService(Components.interfaces.nsIPrefBranch);
14             prefs.setCharPref(‘browser.startup.homepage‘,vrl);
15         }else{
16             alert("Your browser does not support, please follow the steps below:"+‘\n‘+"1 open the browser settings."+‘\n‘+" 2 click on the settings Webpage."+‘\n‘+"3 input:"+vrl+"Click OK。");
17         }
18     }
19 }
View Code

禁止点击右键和选择文本

bubuko.com,布布扣
 1 function noConTextMenu(obj) {
 2     obj.oncontextmenu = function () {
 3         return false;
 4     }
 5 }
 6 function noSelect(obj){
 7     obj.onselectstart=function(){
 8         return false;
 9     }
10 }
View Code

获取css属性

bubuko.com,布布扣
 1 function getStyle(obj, attr)
 2 {
 3     if(obj.currentStyle)
 4     {
 5         return obj.currentStyle[attr];
 6     }
 7     else
 8     {
 9         return getComputedStyle(obj, false)[attr];
10     }
11 }
View Code

设置css属性(不完全版本)

bubuko.com,布布扣
 1        function css(obj,attr,value){
 2             switch (arguments.length)
 3             {
 4                 case 2://2个参数,判断第二个参数
 5                     if(typeof arguments[1]=="object") { //判断第二个参数是否是json对象,如果是json对象,就用for in函数来遍历json设置属性
 6                         for (var i in attr) {
 7                             obj.style[i] = attr[i];
 8                         }
 9                     }else{              //如果不是对象,为普通的字符串string读取属性值,用的return方法
10                         return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr];
11                         //这句话是判断方法currentStyle是否存在(标准浏览器包括IE),如果存在,则用这种方法,如果不存在,则用getComputerdStyle(FireFox)方法
12                         //只有 IE 和 Opera 支持使用 currentStyle 获取 HTMLElement 的计算后的样式,其他浏览器中不支持。
13                         //
14                         //标准浏览器中使用getComputedStyle,IE9也支持getComputedStyle。
15                         //firefox使用getComputedStyle方法
16 
17                         /*----------------------------------------------------------------------*/
18 
19                         //style 标准的样式!可能是由style属性指定的!
20                         //runtimeStyle 运行时的样式!如果与style的属性重叠,将覆盖style的属性!
21                         //currentStyle 指 style 和 runtimeStyle 的结合!
22                         // document.getElementById(element).style.xxx
23                         //上面所诉方法可以获取元素的样式信息,但是对于引用的外部样式表的属性就获取不到了
24 
25                         /*-----------------------------------------------------------------------*/
26                     }
27                     break;
28                 case 3:
29                         //3个参数,单一设置属性
30                     obj.style[attr]=value;
31                     break;
32                 default :
33                     alert("参数错误");
34             }
35         }
View Code

运动框架1

bubuko.com,布布扣
 1     function startMove(obj,attr,iTarget,fn){
 2         clearInterval(obj.time);
 3         var iCur = 0;
 4         obj.time=setInterval(function() {
 5             attr == ‘opacity‘ ? iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100) : iCur = parseInt(getStyle(obj, attr));
 6             var speed = (iTarget - iCur) / 8;
 7             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 8             if (iCur == iTarget) {
 9                 clearInterval(obj.time);
10                 if(fn) {
11                     fn();
12                 }
13             } else {
14                 //这里是解决在webkit下小数问题,当浏览器认为他到达的时候事实上并没有到达,这里直接给他加上1
15                 if(obj.style.opacity == (iCur + speed) / 100){
16                     iCur +=1;
17                 }
18                 attr == ‘opacity‘ ? obj.style.opacity = (iCur + speed) / 100 : obj.style[attr] = iCur + speed + "px";
19             }
20         },20)
21     }
View Code

运动框架2

bubuko.com,布布扣
 1 //运动框架
 2         function getStyle ( obj, attr ) {
 3             return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle ( obj, null )[attr];
 4         }
 5         function startMove ( obj, json, iSpeed, fn ) {
 6             clearInterval ( obj.time );
 7             obj.time = setInterval ( function () {
 8                 var bStop=true;//每次在循环的开头定义一个变量来判断是否都达到了目标值,否则不会停下
 9                 for(var attr in json){
10                     var iCur = 0;
11                     attr == ‘opacity‘ ? iCur = parseInt ( parseFloat ( getStyle ( obj, attr ) ) * 100 ) : iCur = parseInt ( getStyle ( obj, attr ) );
12                     var speed = (json[attr] - iCur) / iSpeed;
13                     speed = speed > 0 ? Math.ceil ( speed ) : Math.floor ( speed );
14                     if ( iCur != json[attr] ) {  //如果当此循环中有一个没有达到目标值,bstop就是false
15                         bStop=false;
16                     }
17 
18                     /*
19                      //这里是解决在webkit下小数问题,当浏览器认为他到达的时候事实上并没有到达,这里直接给他加上1
20                     if ( obj.style.opacity == (iCur + speed) / 100 ) {
21                         iCur=json[‘opacity‘];
22                     }
23                     */
24                     attr == ‘opacity‘ ? obj.style.opacity = (iCur + speed) / 100 : obj.style[attr] = iCur + speed + "px";
25                    if(bStop) {    //都达到了目标值
26                        clearInterval(obj.time);
27                        if (fn) {
28                            fn();
29                        }
30                    }
31                 }
32             },20)
View Code

运动框架3

bubuko.com,布布扣
 1 //运动框架
 2 function startMove(obj, json, fnEnd)
 3 {
 4     if(obj.timer)
 5     {
 6         clearInterval(obj.timer);
 7     }
 8     obj.timer=setInterval(function (){
 9         doMove(obj, json, fnEnd);
10     }, 30);
11 
12     var oDate=new Date();
13 
14     if(oDate.getTime()-obj.lastMove>30)
15     {
16         doMove(obj, json, fnEnd);
17     }
18 }
19 
20 //获取obj的属性attr
21 function getStyle(obj, attr)
22 {
23     if(obj.currentStyle)
24     {
25         return obj.currentStyle[attr];
26     }
27     else
28     {
29         return getComputedStyle(obj, false)[attr];
30     }
31 }
32 //做运动函数
33 function doMove(obj, json, fnEnd)
34 {
35     var iCur=0;
36     var attr=‘‘;
37     var bStop=true;    //假设运动已经该停止了
38 
39     for(attr in json)
40     {
41         if(attr==‘opacity‘)
42         {
43             iCur=parseInt(100*parseFloat(getStyle(obj, ‘opacity‘)));
44         }
45         else
46         {
47             iCur=parseInt(getStyle(obj, attr));
48         }
49 
50         if(isNaN(iCur))
51         {
52             iCur=0;
53         }
54 
55         var iSpeed=(json[attr]-iCur)/8;
56         iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
57 
58         if(parseInt(json[attr])!=iCur)
59         {
60             bStop=false;
61         }
62 
63         if(attr==‘opacity‘)
64         {
65             obj.style.filter="alpha(opacity:"+(iCur+iSpeed)+")";
66             obj.style.opacity=(iCur+iSpeed)/100;
67         }
68         else
69         {
70             obj.style[attr]=iCur+iSpeed+‘px‘;
71         }
72     }
73 
74     if(bStop)
75     {
76         clearInterval(obj.timer);
77         obj.timer=null;
78 
79         if(fnEnd)
80         {
81             fnEnd();
82         }
83     }
84 
85     obj.lastMove=(new Date()).getTime();
86 }
View Code

 

myQuery

标签:style   blog   http   io   ar   color   os   使用   sp   

原文地址:http://www.cnblogs.com/Nomand/p/4161705.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!