首页 > 代码库 > 几个非常有用的js小函数

几个非常有用的js小函数

 1 function $(v){
 2                   if(typeof v==="function"){
 3                        window.onload=v;
 4                   }else if(typeof v==="string")
 5                   {
 6                        return document.getElementById(v);    
 7                   }else if(v==="object")
 8                   {
 9                        return v;
10                   }
11              }
12             

这个小函数模拟jQuery中的$函数做了一些非常简单的事情。用来获取id,模拟window.onload等等;

  function getStyle(obj,str){

return obj.currentStyle ? obj.currentStyle[str]:getComputedStyle(obj)[str];
}

用来获取元素的属性,有几个限制,1.不能获取未设定的属性,属性中不能有多余的空格;

function stopBubble(e){ 
        if(e&&e.stopPropagation){     
            e.stopPropagation(); 
        }else{ 
            window.event.cancelBubble = true; 
        } 
    } 

事件冒泡绝对是比较头疼的问题了用上面这个函数吧;把函数导入到你的页面中。然后在你不要执行某操作的的事件里面加个变量e,在底下写上一句

stopBubble(e);就好了;

  function doMove(div,arr,dir,target,endfn){
    dir=parseInt(getStyle(div,arr))<target?dir:-dir;
    clearInterval(div.timer);
   div.timer=setInterval(function(){
     var speed =parseInt(getStyle(div,arr))+dir;
       if(speed>target&&dir>0||speed<target&&dir<0)
      {
        speed=target;
      }
      div.style[arr]=speed+"px";
      if(speed==target)
      {
        clearInterval(div.timer);
       endfn&&endfn();
      }
    
    },30)
  

}

这个小函数需要配合上面的getStyle一起使用,作用是对某个对象进行移动。变量分别是,div是要移动的对象,arr是要移动的属性(如left,top等等(但是因为getStyle只能获取定义的属性,所以一定要在css里面定义哦))dir是速度(不用考虑正负),target是你要到达的位置

    
            function doShake(obj,max_length,att){
                function getStyle(obj,str){
                    return obj.currentStyle ? obj.currentStyle[str]:getComputedStyle(obj)[str];//获取元素属性
                }
                var arr=[];
                var num=0;
                for(var i=max_length;i>=0;i--)
                {
                    arr.push(i,-i)
                }
                arr.pop();//做一个数组如果max_length=5;数组就是[5,-5,4,-4,3,-3,2,-2,1,-1,0]
                 clearInterval(obj.timer);//清楚定时器防止多次点击出现异常;
            
            obj.timer=setInterval(function(){obj.style[att]=parseInt(getStyle(obj,att))+arr[num]+"px";//开定时器每个100毫秒改变元素的某个属性等于arr的第num项
                num++
                if(num==arr.length)
                {
                   clearInterval(obj.timer);
                }//判断num等于arr.length停定时器
            },100)    }

抖动小函数,用来让一个对象轻轻的抖动,max_length是抖动的峰值,att是你想让那个属性抖动,统一配合getStyle使用;一点点问题,/*我不知道怎么改,就是当用户在第一次使用没结束前再次执行操作,对象就回不到原来的位置。求大神;*/