下面的这些简单的框架见证了我自学js的过程
充满了艰辛和不易,也感谢群里的热心人的支持和资料
虽然现在看着比较少,或者大神们觉得有点菜,但是这是成长的过程
等到个人理解和掌握的函数比较多的时候,我就自己建立一个框架,属于我自己的框架,自己的query
加入收藏
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 }
设为主页
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 }
禁止点击右键和选择文本
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 }
获取css属性
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 }
设置css属性(不完全版本)
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 }
运动框架1
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 }
运动框架2
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)
运动框架3
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 }
时间: 2024-10-11 01:09:36