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使用;一点点问题,/*我不知道怎么改,就是当用户在第一次使用没结束前再次执行操作,对象就回不到原来的位置。求大神;*/