30 changed files with 741 additions and 164 deletions
Split View
Diff Options
-
28begin.html
-
BINcss/font/icon.eot
-
BINcss/font/icon.ttf
-
178css/game1.css
-
15css/game4.css
-
4css/index.css
-
18game1.html
-
7game2.html
-
8game3.html
-
55game4.html
-
56game5.html
-
BINimg/4.gif
-
BINimg/game1/lin1.png
-
BINimg/game1/lin2.png
-
BINimg/game1/lin3.png
-
BINimg/game2/lin1.png
-
BINimg/game2/lin2.png
-
BINimg/game2/lin3.png
-
BINimg/game3/lin1.png
-
BINimg/game3/lin2.png
-
BINimg/game3/lin3.png
-
BINimg/game4/lin1.png
-
BINimg/game4/lin2.png
-
BINimg/game4/lin3.png
-
BINimg/game5/lin1.png
-
BINimg/game5/lin2.png
-
BINimg/game5/lin3.png
-
12index.html
-
79js/snow.js
-
445js/zQuery.js
@ -0,0 +1,79 @@ |
|||
function win(attr) { //获取可视区尺寸,参数为height|width
|
|||
// 横屏
|
|||
var detectOrient = function() { |
|||
var width = document.documentElement.clientWidth, |
|||
height = document.documentElement.clientHeight, |
|||
wrapper = document.getElementById("wrap"), |
|||
style = ""; |
|||
if(width >= height) { // 竖屏
|
|||
style += "width:100%"; |
|||
style += "height:100%;"; |
|||
style += "-webkit-transform: rotate(0); transform: rotate(0);"; |
|||
style += "-webkit-transform-origin: 0 0;"; |
|||
style += "transform-origin: 0 0;"; |
|||
} else { // 横屏
|
|||
style += "width:" + height + "px;"; // 注意旋转后的宽高切换
|
|||
style += "height:" + width + "px;"; |
|||
style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);"; |
|||
// 注意旋转中点的处理
|
|||
style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;"; |
|||
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;"; |
|||
} |
|||
wrapper.style.cssText = style; |
|||
} |
|||
window.onresize = detectOrient; |
|||
detectOrient(); |
|||
} |
|||
window.onload = function() { |
|||
var bd = document.getElementsByClassName('snowList'); //获取body
|
|||
function snow() { //雪花函数
|
|||
|
|||
var win_height = '100%'; //获取窗口高度
|
|||
var win_width = document.documentElement.clientHeight; //获取窗口宽度
|
|||
function createsnow() { //创建雪花函数
|
|||
var snowdiv = document.createElement('div'); //新建一个div
|
|||
snowdiv.className = 'snow' |
|||
snowdiv.innerHTML = "j"; //写入雪花(字体的代码为j)
|
|||
var size = 20 + parseInt(Math.random() * 30); //随机生成雪花的大小
|
|||
var left = parseInt(win_width * (Math.random()) * 0.98); //随机生成left值
|
|||
snowdiv.style.fontSize = size + 'px'; //应用字体大小
|
|||
snowdiv.style.width = size + 'px'; //div应用宽度
|
|||
snowdiv.style.height = size + 'px'; //div应用高度
|
|||
snowdiv.style.left = left + 'px'; //雪花的left值
|
|||
$('.snowList').append(snowdiv) |
|||
// bd.append(snowdiv); //将此雪花放入文档中
|
|||
return snowdiv; //返回这个雪花对象
|
|||
} |
|||
setInterval(function() { |
|||
var snow = createsnow(); //创建雪花并得到这一对象
|
|||
var sbd = Math.ceil(Math.random() * 10); //随机生成下落速度
|
|||
move(snow, sbd); //移动雪花
|
|||
}, 100); |
|||
|
|||
function move(obj, speed) { //移动函数
|
|||
var top = 0; |
|||
var timer = setInterval( |
|||
function() { |
|||
top = top + speed; //改变top值
|
|||
obj.style.top = top + 'px'; |
|||
if(top > win_height - 20) { |
|||
clearInterval(timer); //下落停止
|
|||
} |
|||
}, 30); |
|||
} |
|||
setInterval(function() { //一段时间之后清理一次雪花,防止文档过大卡住
|
|||
var snows = document.getElementsByClassName('snow'); |
|||
for(var i = 0; i < snows.length / 3; i++) { |
|||
snows[i].parentNode.removeChild(snows[i]); |
|||
} |
|||
}, 5000); |
|||
} |
|||
snow(); //执行snow函数
|
|||
window.onresize = function() { //窗口改变
|
|||
var snows = document.getElementsByTagName('div'); |
|||
snows.className="snow" |
|||
for(var i = 0; i < snows.length; i++) { |
|||
snows[i].parentNode.removeChild(snows[i]); |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,445 @@ |
|||
function rgb_color(){//随机rgb色生成函数,返回值为rgb颜色字符串
|
|||
var r=parseInt(Math.random()*255); |
|||
var g=parseInt(Math.random()*255); |
|||
var b=parseInt(Math.random()*255); |
|||
var newcolor="rgb("+r+","+g+","+b+")"; |
|||
return newcolor; |
|||
} |
|||
function rgba_color(){//随机rgba色生成函数,返回值为rgba颜色字符串
|
|||
var r=parseInt(Math.random()*255); |
|||
var g=parseInt(Math.random()*255); |
|||
var b=parseInt(Math.random()*255); |
|||
var a=Math.random(); |
|||
var newcolor="rgba("+r+","+g+","+b+","+a+")"; |
|||
return newcolor; |
|||
} |
|||
function getbyclass(parent,classname){//通过类名获取元素函数,参数为父元素、类名,返回值为元素数组
|
|||
var result=new Array(); |
|||
var allclass=parent.getElementsByTagName('*'); |
|||
for (var i=0; i<allclass.length;i++ ) |
|||
{ |
|||
|
|||
if(classname==allclass[i].className) |
|||
result.push(allclass[i]); |
|||
} |
|||
return result; |
|||
} |
|||
|
|||
function getbyclassname(tagname,classname){//通过类名获取元素函数,参数为标签名、类名,返回值为元素数组
|
|||
var result=new Array(); |
|||
var allclass=document.getElementsByTagName(tagname); |
|||
for (var i=0; i<allclass.length;i++ ) |
|||
{ |
|||
|
|||
if(classname==allclass[i].className) |
|||
result.push(allclass[i]); |
|||
} |
|||
return result; |
|||
} |
|||
|
|||
|
|||
function index(current, obj) |
|||
{ //获取元素索引值
|
|||
for (var i = 0; i < obj.length; i++) |
|||
{ |
|||
if (obj[i] == current) |
|||
{ |
|||
return i; |
|||
} |
|||
} |
|||
} |
|||
|
|||
function win(attr) |
|||
{//获取可视区尺寸,参数为height|width
|
|||
switch(attr) |
|||
{ |
|||
case 'height'://获取窗口高度
|
|||
if (window.innerHeight) |
|||
{ |
|||
winHeight = window.innerHeight;return winHeight; |
|||
}else if ((document.body) && (document.body.clientHeight)){ |
|||
winHeight = document.body.clientHeight;return winHeight; |
|||
} |
|||
if (document.documentElement && document.documentElement.clientHeight) |
|||
{ |
|||
winHeight = document.documentElement.clientHeight;return winHeight; |
|||
} |
|||
break; |
|||
case 'width'://获取窗口宽度
|
|||
if (window.innerWidth){ |
|||
winWidth = window.innerWidth;return winWidth; |
|||
}else if ((document.body) && (document.body.clientWidth)){ |
|||
winWidth = document.body.clientWidth; return winWidth; |
|||
}//通过深入Document内部对body进行检测,获取窗口大小
|
|||
if (document.documentElement &&document.documentElement.clientWidth) |
|||
{ |
|||
winWidth = document.documentElement.clientWidth;return winWidth; |
|||
} |
|||
break; |
|||
case 'scrollTop': |
|||
var scrollTop; |
|||
if(typeof window.pageYOffset != 'undefined'){ |
|||
scrollTop = window.pageYOffset; |
|||
} |
|||
else |
|||
if(typeof document.compatMode != 'undefined' && |
|||
document.compatMode != 'BackCompat'){ |
|||
scrollTop = document.documentElement.scrollTop; |
|||
} |
|||
else |
|||
if(typeof document.body != 'undefined'){ |
|||
scrollTop = document.body.scrollTop; |
|||
} |
|||
return scrollTop;break; |
|||
default :return 0;break; |
|||
} |
|||
} |
|||
/**************************************************运动框架*****************************************************/ |
|||
function css(obj, attr, value) |
|||
{ |
|||
var re=[]; |
|||
if(arguments.length==2) |
|||
{ |
|||
switch(attr){ |
|||
case 'opacity':re.push(Math.round(100*parseFloat(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr])));return re;break; |
|||
case 'backgroundPosition':var res=obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr];res=res.split(" ");res[0]=parseInt(res[0]);res[1]=parseInt(res[1]);return res;break; |
|||
case 'rotate':var transformstr=obj.currentStyle?obj.currentStyle['transform']:document.defaultView.getComputedStyle(obj, false)['webkitTransform']||document.defaultView.getComputedStyle(obj, false)['msTransform']||document.defaultView.getComputedStyle(obj, false)['MozTransform']||document.defaultView.getComputedStyle(obj, false)['OTransform']||document.defaultView.getComputedStyle(obj, false)['transform']+""; |
|||
var matrixarray=transformstr.split(","); |
|||
re.push(Math.ceil(Math.acos(matrixarray[3])/Math.PI*180));return re;break; |
|||
case 'translate': |
|||
var transformstr=obj.currentStyle?obj.currentStyle['transform']:document.defaultView.getComputedStyle(obj, false)['webkitTransform']||document.defaultView.getComputedStyle(obj, false)['msTransform']||document.defaultView.getComputedStyle(obj, false)['MozTransform']||document.defaultView.getComputedStyle(obj, false)['OTransform']||document.defaultView.getComputedStyle(obj, false)['transform']+""; |
|||
var matrixarray=transformstr.split(","); |
|||
re.push(parseInt(matrixarray[4]));re.push(parseInt(matrixarray[5]));return re;break; |
|||
case 'translateX'://transform 2d转换中的translateX
|
|||
var transformstr=obj.currentStyle?obj.currentStyle['transform']:document.defaultView.getComputedStyle(obj, false)['webkitTransform']||document.defaultView.getComputedStyle(obj, false)['msTransform']||document.defaultView.getComputedStyle(obj, false)['MozTransform']||document.defaultView.getComputedStyle(obj, false)['OTransform']||document.defaultView.getComputedStyle(obj, false)['transform']+""; |
|||
var matrixarray=transformstr.split(","); |
|||
re.push((parseInt(matrixarray[4])));return re;break; |
|||
case 'translateY'://transform 2d转换中的translateY
|
|||
var transformstr=obj.currentStyle?obj.currentStyle['transform']:document.defaultView.getComputedStyle(obj, false)['webkitTransform']||document.defaultView.getComputedStyle(obj, false)['msTransform']||document.defaultView.getComputedStyle(obj, false)['MozTransform']||document.defaultView.getComputedStyle(obj, false)['OTransform']||document.defaultView.getComputedStyle(obj, false)['transform']+""; |
|||
var matrixarray=transformstr.split(","); |
|||
re.push((parseInt(matrixarray[5])));return re;break; |
|||
case 'transform'://transform 2d matrix方法
|
|||
var transformstr=obj.currentStyle?obj.currentStyle['transform']:document.defaultView.getComputedStyle(obj, false)['webkitTransform']||document.defaultView.getComputedStyle(obj, false)['msTransform']||document.defaultView.getComputedStyle(obj, false)['MozTransform']||document.defaultView.getComputedStyle(obj, false)['OTransform']||document.defaultView.getComputedStyle(obj, false)['transform']+""; |
|||
var matrixarray=transformstr.split(","); |
|||
re.push(parseInt(matrixarray[0].match(/-?\d+(\.\d+)?/g)[0]*10000));//提出数组第一个字符串中的数字
|
|||
re.push(parseInt(matrixarray[1].match(/-?\d+(\.\d+)?/g)[0]*10000)); |
|||
re.push(parseInt(matrixarray[2].match(/-?\d+(\.\d+)?/g)[0]*10000)); |
|||
re.push(parseInt(matrixarray[3].match(/-?\d+(\.\d+)?/g)[0]*10000)); |
|||
re.push(parseInt(matrixarray[4].match(/-?\d+(\.\d+)?/g)[0]*10000)); |
|||
re.push(parseInt(matrixarray[5].match(/-?\d+(\.\d+)?/g)[0]*10000)); |
|||
// console.log(parseInt(matrixarray[0].match(/-?\d+(\.\d+)?/g)[0]*10000)+" "+
|
|||
// parseInt(matrixarray[1].match(/-?\d+(\.\d+)?/g)[0]*10000)+" "+
|
|||
// parseInt(matrixarray[2].match(/-?\d+(\.\d+)?/g)[0]*10000)+" "+
|
|||
// parseInt(matrixarray[3].match(/-?\d+(\.\d+)?/g)[0]*10000)+" "+
|
|||
// parseInt(matrixarray[4].match(/-?\d+(\.\d+)?/g)[0]*10000)+" "+
|
|||
// parseInt(matrixarray[5].match(/-?\d+(\.\d+)?/g)[0]*10000));
|
|||
return re;break; |
|||
default : |
|||
re.push(parseInt(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]));return re;break; |
|||
} |
|||
} |
|||
else if(arguments.length==3) |
|||
switch(attr) |
|||
{ |
|||
case 'width': |
|||
case 'height': |
|||
case 'paddingLeft': |
|||
case 'paddingTop': |
|||
case 'paddingRight': |
|||
case 'paddingBottom': |
|||
value[0]=Math.max(value[0],0); |
|||
case 'left': |
|||
case 'top': |
|||
case 'marginLeft': |
|||
case 'marginTop': |
|||
case 'marginRight': |
|||
case 'marginBottom': |
|||
obj.style[attr]=value[0]+'px'; |
|||
break; |
|||
case 'opacity': |
|||
obj.style.filter="alpha(opacity:"+value[0]+")"; |
|||
obj.style.opacity=value[0]/100; |
|||
break; |
|||
case 'backgroundPosition': |
|||
obj.style.backgroundPosition=value[0]+'px '+value[1]+'px';break; |
|||
case 'rotate': |
|||
obj.style.webkitTransform="rotate(" + value[0]+ "deg)"; |
|||
obj.style.msTransform="rotate(" + value[0]+ "deg)"; |
|||
obj.style.MozTransform="rotate(" + value[0] + "deg)"; |
|||
obj.style.OTransform="rotate(" + value[0]+ "deg)"; |
|||
obj.style.transform="rotate(" + value[0] + "deg)"; |
|||
break; |
|||
case 'translate': |
|||
obj.style.webkitTransform="translate(" + value[0] + "px,"+value[1]+"px)"; |
|||
obj.style.msTransform="translate(" + value[0] + "px,"+value[1]+"px)"; |
|||
obj.style.MozTransform="translate(" + value[0] + "px,"+value[1]+"px)"; |
|||
obj.style.OTransform="translate(" + value[0] + "px,"+value[1]+"px)"; |
|||
obj.style.transform="translate(" + value[0] + "px,"+value[1]+"px)"; |
|||
break; |
|||
case 'translateX':obj.style.webkitTransform="translateX(" + value[0] + "px)"; |
|||
obj.style.msTransform="translateX(" + value[0] + "px)"; |
|||
obj.style.MozTransform="translateX(" + value[0] + "px)"; |
|||
obj.style.OTransform="translateX(" + value[0] + "px)"; |
|||
obj.style.transform="translateX(" + value[0] + "px)"; |
|||
break; |
|||
case 'translateY':obj.style.webkitTransform="translateY(" + value[0] + "px)"; |
|||
obj.style.msTransform="translateY(" + value[0] + "px)"; |
|||
obj.style.MozTransform="translateY(" + value[0] + "px)"; |
|||
obj.style.OTransform="translateY(" + value[0] + "px)"; |
|||
obj.style.transform="translateY(" + value[0] + "px)"; |
|||
break; |
|||
case 'transform':obj.style.webkitTransform="matrix(" + value[0] + ","+value[1] + ","+value[2] + ","+value[3] + ","+value[4] + ","+value[5] +")"; |
|||
obj.style.msTransform="matrix(" + value[0] + ","+value[1] + ","+value[2] + ","+value[3] + ","+value[4] + ","+value[5] +")"; |
|||
obj.style.MozTransform="matrix(" + value[0] + ","+value[1] + ","+value[2] + ","+value[3] + ","+value[4] + ","+value[5] +")"; |
|||
obj.style.OTransform="matrix(" + value[0] + ","+value[1] + ","+value[2] + ","+value[3] + ","+value[4] + ","+value[5] +")"; |
|||
obj.style.transform="matrix(" + value[0] + ","+value[1] + ","+value[2] + ","+value[3] + ","+value[4] + ","+value[5] +")"; |
|||
break; |
|||
default: |
|||
obj.style[attr]=value[0]; |
|||
} |
|||
|
|||
return function (attr_in, value_in){css(obj, attr_in, value_in)}; |
|||
} |
|||
|
|||
|
|||
function stop(obj) |
|||
{ |
|||
clearInterval(obj.timer); |
|||
} |
|||
|
|||
function move(obj, oTarget, iType, fnCallBack, fnDuring) |
|||
{ |
|||
var fnMove=null; |
|||
if(obj.timer) |
|||
{ |
|||
clearInterval(obj.timer); |
|||
} |
|||
switch(iType) |
|||
{ |
|||
case "buffer": |
|||
fnMove=do_buffer_move; |
|||
break; |
|||
case "flex": |
|||
fnMove=do_flex_move; |
|||
break; |
|||
default: |
|||
fnMove=do_buffer_move; |
|||
break; |
|||
} |
|||
|
|||
obj.timer=setInterval(function (){ |
|||
fnMove(obj, oTarget, fnCallBack, fnDuring); |
|||
}, 30); |
|||
} |
|||
|
|||
/*------------------------------------运动函数中的全局变量-------------------------------------------*/ |
|||
var attr=''; |
|||
var next=[]; |
|||
var cur; |
|||
var stopBtn=false; |
|||
function do_buffer_move(obj, oTarget, fnCallBack, fnDuring) |
|||
{ |
|||
stopBtn=false;var count=0; |
|||
if(!obj.speed)obj.speed={};//该对象的速度属性,包括多个属性值速度,如果未定义则定义
|
|||
for(attr in oTarget) |
|||
{ |
|||
if(!obj.speed[attr]){obj.speed[attr]=[];}//该对象的某一属性的速度值,值为该属性的速度值的数组
|
|||
cur=css(obj, attr); |
|||
if (attr=='transform') |
|||
{ |
|||
for (var j=0;j<cur.length ;j++) |
|||
{ |
|||
if(undefined==obj.speed[attr][j])obj.speed[attr][j]=0;//在该对象目前的属性中,若某一速度参数未定义,则定义
|
|||
var temp=parseInt(oTarget[attr][j]*10000); |
|||
if(Math.abs(temp-cur[j])>1000)//由于小数的特殊性,无法保证两数一致,相差很小时忽略差距
|
|||
{ |
|||
obj.speed[attr][j]=(temp-cur[j])/5; |
|||
obj.speed[attr][j]=obj.speed[attr][j]>0?Math.ceil(obj.speed[attr][j]):Math.floor(obj.speed[attr][j]); |
|||
next[j]=(cur[j]+obj.speed[attr][j])/10000; |
|||
//console.log(j+" "+attr+" "+cur[j]+' '+obj.speed[attr][j]+' '+next[j]+' '+oTarget[attr][j]) ;//运动过程中的参数值
|
|||
} |
|||
else{ |
|||
next[j]=parseInt(oTarget[attr][j]*10000)/10000;//已经到达目标的值保持
|
|||
count++;//记录以达到目标的个数
|
|||
//console.log(attr+"count"+count);
|
|||
} |
|||
} |
|||
} |
|||
else{ |
|||
for (var j=0;j<cur.length ;j++) |
|||
{ |
|||
if(undefined==obj.speed[attr][j])obj.speed[attr][j]=0;//在该对象目前的属性中,若某一速度参数未定义,则定义
|
|||
if(oTarget[attr][j]!=cur[j]) |
|||
{ |
|||
oTarget[attr][j]=parseInt(oTarget[attr][j]); |
|||
obj.speed[attr][j]=(oTarget[attr][j]-cur[j])/5; |
|||
obj.speed[attr][j]=obj.speed[attr][j]>0?Math.ceil(obj.speed[attr][j]):Math.floor(obj.speed[attr][j]); |
|||
next[j]=cur[j]+obj.speed[attr][j]; |
|||
//console.log(j+" "+attr+" "+cur[j]+' '+obj.speed[attr][j]+' '+next[j]+' '+oTarget[attr][j]) ;//运动过程中的参数值
|
|||
} |
|||
else{ |
|||
next[j]=oTarget[attr][j];//已经到达目标的值保持
|
|||
count++;//记录以达到目标的个数
|
|||
//console.log(attr+"count"+count);
|
|||
} |
|||
} |
|||
} |
|||
css(obj,attr,next); |
|||
} |
|||
var allattr=0;//所有属性计数器清零
|
|||
for(attr in oTarget) |
|||
{ |
|||
for (var i=0;i<oTarget[attr].length; i++) |
|||
{ |
|||
allattr++;//计算出所有属性个数
|
|||
} |
|||
} |
|||
//console.log(count+" "+allattr);//以达个数与总个数对比
|
|||
if(count==allattr){stopBtn=true;}//当所有属性都达到目标时停止开关打开
|
|||
|
|||
if(fnDuring)fnDuring.call(obj); |
|||
if(stopBtn) |
|||
{ |
|||
obj.speed={}; |
|||
//console.log("本次运动完成");
|
|||
clearInterval(obj.timer); |
|||
if(fnCallBack)fnCallBack.call(obj); |
|||
} |
|||
} |
|||
function do_flex_move(obj, oTarget, fnCallBack, fnDuring) |
|||
{ |
|||
stopBtn=false;var count=0;//有关是否运动的变量
|
|||
if(!obj.speed)obj.speed={};//该对象的速度属性,包括多个属性值速度,如果未定义则定义
|
|||
for(attr in oTarget) |
|||
{ |
|||
if(!obj.speed[attr]){obj.speed[attr]=[];}//该对象的某一属性的速度值,值为该属性的速度值的数组
|
|||
//console.log(obj.speed[attr]);
|
|||
cur=css(obj, attr); |
|||
if (attr=='transform') |
|||
{ |
|||
for (var j=0;j<cur.length ;j++) |
|||
{ |
|||
if(undefined==obj.speed[attr][j])obj.speed[attr][j]=1;//在该对象目前的属性中,若某一速度参数未定义,则定义
|
|||
var temp=parseInt(oTarget[attr][j]*10000); |
|||
if(Math.abs(parseInt(obj.speed[attr][j]))!=0) |
|||
{ |
|||
obj.speed[attr][j]+=(temp-cur[j])/5; |
|||
obj.speed[attr][j]*=0.7; |
|||
obj.speed[attr][j]=parseInt(obj.speed[attr][j]); |
|||
next[j]=(cur[j]+obj.speed[attr][j])/10000; |
|||
//console.log(j+" "+attr+" "+cur[j]+' '+obj.speed[attr][j]+' '+next[j]+' '+oTarget[attr][j]) ;//运动过程中的参数值
|
|||
} |
|||
else |
|||
{ |
|||
next[j]=parseInt(oTarget[attr][j]*10000)/10000;//已经到达目标的值保持
|
|||
count++;//记录以达到目标的个数
|
|||
//console.log(attr+"count"+count);
|
|||
} |
|||
} |
|||
}else{ |
|||
for (var j=0;j<cur.length ;j++) |
|||
{ |
|||
if(undefined==obj.speed[attr][j])obj.speed[attr][j]=1;//在该对象目前的属性中,若某一速度参数未定义,则定义
|
|||
if(Math.abs(obj.speed[attr][j])!=0) |
|||
{ |
|||
obj.speed[attr][j]+=(oTarget[attr][j]-cur[j])/5; |
|||
obj.speed[attr][j]*=0.7; |
|||
obj.speed[attr][j]=parseInt(obj.speed[attr][j]); |
|||
next[j]=cur[j]+obj.speed[attr][j]; |
|||
//console.log(j+" attr "+attr+" "+cur[j]+' '+obj.speed[attr][j]+' '+next[j]+' '+oTarget[attr][j]) ;//运动过程中的参数值
|
|||
} |
|||
else |
|||
{ |
|||
next[j]=oTarget[attr][j];//已经到达目标的值保持
|
|||
count++;//记录以达到目标的个数
|
|||
//console.log(attr+"count"+count);
|
|||
} |
|||
} |
|||
} |
|||
css(obj,attr,next); |
|||
} |
|||
|
|||
var allattr=0;//所有属性计数器清零
|
|||
for(attr in oTarget) |
|||
{ |
|||
for (var i=0;i<oTarget[attr].length; i++) |
|||
{ |
|||
allattr++;//计算出所有属性个数
|
|||
} |
|||
} |
|||
//console.log(count+" "+allattr);//以达个数与总个数对比
|
|||
if(count==allattr){stopBtn=true;}//当所有属性都达到目标时停止开关打开
|
|||
|
|||
if(fnDuring)fnDuring.call(obj); |
|||
if(stopBtn) |
|||
{ |
|||
obj.speed={}; |
|||
//console.log("本次运动完成");
|
|||
clearInterval(obj.timer); |
|||
if(fnCallBack)fnCallBack.call(obj); |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
function drag_throw_move(obj,speedX,speedY){//拖拽+抛出运动,使用时需首先定义timer定时器,传入对象、水平速度和竖直速度
|
|||
timer=setInterval(function (){ |
|||
speedY+=3;//与重力相似,y轴的速度会随着物体下落而增大
|
|||
var left=obj.offsetLeft+speedX;//计算定位值
|
|||
var top=obj.offsetTop+speedY; |
|||
if (top>=(win('height')-obj.offsetHeight))//碰撞到底部,y轴速度反向,x轴速度减小
|
|||
{ |
|||
speedY*=-0.8; |
|||
speedX*=0.8; |
|||
top=(win('height')-obj.offsetHeight); |
|||
}else if (top<=0)//碰撞到顶部,y轴速度反向,x轴速度减小
|
|||
{ |
|||
speedY*=-0.8; |
|||
speedX*=0.8; |
|||
top=0; |
|||
} |
|||
if (left>=(win('width')-obj.offsetWidth))//碰撞到右侧,X轴速度反向且减小
|
|||
{ |
|||
speedX*=-0.8; |
|||
left=(win('width')-obj.offsetWidth); |
|||
}else if (left<=0)//碰撞到左侧,X轴速度反向且减小
|
|||
{ |
|||
speedX*=-0.8; |
|||
left=0; |
|||
} |
|||
if (Math.abs(speedX)<1)//速度很小时视为停止
|
|||
{ |
|||
speedX=0; |
|||
} |
|||
if (Math.abs(speedY)<1)//速度很小时视为停止
|
|||
{ |
|||
speedY=0; |
|||
} |
|||
if(speedX==0&&speedY==0&&top==(win('height')-obj.offsetHeight)){//运动过程停止
|
|||
clearInterval(timer); |
|||
} |
|||
obj.style.left=left+'px';//应用定位
|
|||
obj.style.top=top+'px'; |
|||
},30); |
|||
} |
|||
|
|||
function drag(obj){//实现拖拽,参数为对象
|
|||
obj.onmousedown=function (ev){//按下鼠标
|
|||
var oev=ev||event; |
|||
var disX=oev.clientX-obj.offsetLeft; |
|||
var disY=oev.clientY-obj.offsetTop; |
|||
document.onmousemove=function (ev){//拖动鼠标
|
|||
var oev=ev||event; |
|||
var left=oev.clientX-disX; |
|||
var top=oev.clientY-disY; |
|||
obj.style.left=left+'px';//更新对象的位置
|
|||
obj.style.top=top+'px'; |
|||
} |
|||
document.onmouseup=function (){//抬起鼠标
|
|||
document.onmousemove=null; |
|||
document.onmouseup=null; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/**************************************************运动框架结束*****************************************************/ |