您的位置：首页 > 其它

运动---第八课时

2013-06-14 22:52 267 查看

运动的最后一课时笔记，感觉蛮难的，有一些东西没有理解，涉及的知识点非常多。

先来看一个小小的东西。关于弹性运动-----设置一个div，当鼠标移上去的时候div伸展开，当鼠标移出的时候div还原到原先的大小。可以复制代码自己运行一下。

iSpeed+=(iTarget-height)/5;
iSpeed*=0.7;

这两句用来设置div运动时的速度，首先加等于实现缓冲效果，其次在第一次的处理之后继续减小速度，乘以一个小于1的数。

if(Math.abs(iSpeed)<1&&Math.abs(iSpeed-height)<1)
{
clearInterval(obj.timer);
obj.style.height=iTarget+'px';
}
else{
height+=iSpeed;
obj.style.height=height+'px';
}

如果速度小于1，并且距离小于1，那么就清除定时器；同时硬性的设置div的高度为目标值；相反地，就运行定时器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{width:100px;height:50px;background:#666;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
startMove(oDiv,100);
};
oDiv.onmouseout=function(){
startMove(oDiv,50);
};
}

var iSpeed=0;
var height=50;

function startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
iSpeed+=(iTarget-height)/5;
iSpeed*=0.7;
if(Math.abs(iSpeed)<1&&Math.abs(iSpeed-height)<1)
{
clearInterval(obj.timer);
obj.style.height=iTarget+'px';
}
else{
height+=iSpeed;
obj.style.height=height+'px';
}
},30);

}
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

All Code
拖拽+重力+弹性

为了方便看，把代码直接展开。当鼠标按住div后，div跟着鼠标走，把div丢出去的时候会自己滚动直到停止。startMove函数注意的地方----因为div会跑出浏览器的当前视窗，所以要限制div的活动范围，给上下左右都设置规则，当要超出范围的时候，把速度iSpeed*=-1这样div会往相反的方向走；因为div每次移动的距离是不一样的，有时会产生滚动条，可以给body设置一个overflow，但是一个网站不可能只有一屏的高度，就算有，也很少，所以干脆硬性设置，把他的位置设置为最左边，最下面，这样就不会有滚动条。事件对象--前面的文章有写过，拖拽就是通过事件对象实现，获取鼠标的坐标，当鼠标松开的时候执行startMove函数，同时清除鼠标移动，鼠标按下事件。最后在执行了整个鼠标按下事件以后清除定时器，下次拖拽就不会受上次的影响。对于鼠标坐标获取个人有点模糊。明天开始学习面向对象，其实看过一遍了，面向对象的写法比运动还要难得多，需要时间多琢磨琢磨。暂时到这，明天考六级。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
div {width:3px; height:3px; position:absolute; background:black;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

var lastX=0;
var lastY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;

document.onmousemove=function (ev)
{
var oEvent=ev||event;

var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;

oDiv.style.left=l+'px';
oDiv.style.top=t+'px';

iSpeedX=l-lastX;
iSpeedY=t-lastY;

lastX=l;
lastY=t;

document.title='x:'+iSpeedX+', y:'+iSpeedY;
};

document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;

startMove();
};

clearInterval(timer);
};
};

var timer=null;

var iSpeedX=0;
var iSpeedY=0;

function startMove()
{
clearInterval(timer);

timer=setInterval(function (){
var oDiv=document.getElementById('div1');

iSpeedY+=3;

var l=oDiv.offsetLeft+iSpeedX;
var t=oDiv.offsetTop+iSpeedY;

if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
{
iSpeedY*=-0.8;
iSpeedX*=0.8;
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
else if(t<=0)
{
iSpeedY*=-1;
iSpeedX*=0.8;
t=0;
}

if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
{
iSpeedX*=-0.8;
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}
else if(l<=0)
{
iSpeedX*=-0.8;
l=0;
}

if(Math.abs(iSpeedX)<1)
{
iSpeedX=0;
}

if(Math.abs(iSpeedY)<1)
{
iSpeedY=0;
}

if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight)
{
clearInterval(timer);
alert('停止');
}
else
{
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}

document.title=iSpeedX;
}, 30);
}
</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1">
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航