您的位置：首页 > 其它

运动---第七课时

2013-06-12 23:54 295 查看

弹性运动----弹性运动不同于匀速运动，元素运动的速度先快后慢，后者是先慢后快，而且在运动的过程中有一个权重（类似于重力加速度），看上去就像真实的自由落体运动一样。下面看一下加速运动和减速运动：加速运动顾名思义就是速度不断增加，具体到这里就是iSpeed++，每一次都加1，实现累加。累减的过程刚好相反，假设变量iSpeed的初始值为20，然后速度递减iSpeed--,也就是累减。加速运动和减速运动的结合体就构成了弹性运动。

加速运动：

<script>
var iSpeed=0;
function startMove()
{
var oDiv=document.getElementById('div1');
setInterval(function (){
iSpeed++；
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
}, 30);
}
</script>

减速运动：当元素的速度减到为0时，速度继续减小，然后变为负值，会往反方向运动。这个还蛮有意思的。

<script>
var iSpeed=20;
function startMove()
{
var oDiv=document.getElementById('div1');
setInterval(function (){
iSpeed--;
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
}, 30);
}
</script>

简单的弹性运动：当点击按钮的时候，元素左右摆动，但是因为没有加权，所以运动起来弹性似乎没有。速度iSpeed++的写法有很多种，iSpeed++其实就是iSpeed=ispeed+1;为了改进速度的加权，所以把iSpeed++改为iSpeed+=(300-oDiv.offsetLeft)/50;让速度有一个变化的趋势

<style>
#div1{width:100px;height:100px;background:#000;}
</style>
<script>
var iSpeed=0;

function startMove()
{
var oDiv=document.getElementById('div1');//不知道为神马出不来效果，把点击事件给按钮也没有反应
var oBtn=document.getElementById('btn1');

oBtn.onclick=setInterval(function (){
if(oDiv.offsetLeft<300)
{
iSpeed++;//就是累加1
//iSpeed+=(300-oDiv.offsetLeft)/50;
}
else
{
iSpeed--;//就是累减1
//iSpeed-=(oDiv.offsetLeft-300)/50;
}
//iSpeed+=(300-oDiv.offsetLeft)/50;其实也就是这一句话，加速和减速化简后式子相等
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
}, 30);
}
</script>
</head>

<body>
<input type="button" value="开始运动" id="btn1"/>
<div id="div1"></div>
<div style="position:absolute;left:300px;top:0;background:#333;width:1px;height:500px;"> </div>
</body>

弹性+摩擦：弹性就是改变元素的Left值，摩擦就是让元素的速度越来越慢，直到停止。当iSpeed累乘以一个小于1的数的时候，速度就开始越来越慢了，知道元素停止运动。把累乘和累加结合起来就实现了元素的弹性运动，并且在需要的时候停止运动。

<script>
var iSpeed=0;
function startMove()
{
var oDiv=document.getElementById('div1');
setInterval(function (){
iSpeed+=(300-oDiv.offsetLeft)/5;
iSpeed*=0.7;
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
}, 30);
}
</script>

滑动的菜单----在结构上多设置了一个li，用来隐藏和显示红色背景，这个li只起到这么一个作用。把它定位到其他li的下面，形成下划线的效果。oBg是li的最后一个，所以获取他就要在长度上减1；同时在做循环的时候，最后一个li不需要添加事件，所以同样是length-1;startMove函数改变oBg的offsetLeft来实现下划线的不同位置。为了避免样式不支持小数点，所以把left值赋值给一个变量，因为变量可以接受小数点，所以就可以避免小数点带来的问题。清楚定时器的条件要满足两个：一是速度在-1到1之间的时候，距离在-1到1的时候。因为倒数第二个li会存在一个像素的误差，所以强制性的设置它的left为目标值，即obj.style.left=iTarget+'px'。这个例子有点伤脑筋，慢慢斟酌:)

<style>
* { padding: 0; margin: 0; }
li { list-style: none; }

ul { width: 400px; height: 30px; position: relative; margin: 100px auto 0; }
li { float: left; width: 98px; height: 28px; line-height: 28px; border: 1px solid #ccc; text-align: center; z-index: 2; position: relative; cursor: pointer; }
.bg { width: 100px; height: 5px; overflow: hidden; background: red; border: none; position: absolute; top: 24px; left: 0; z-index: 1; }
</style>
<script type="text/javascript">
window.onload=function ()
{
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var oBg=aLi[aLi.length-1];
var i=0;

for(i=0;i<aLi.length-1;i++)
{
aLi[i].onmouseover=function ()
{
startMove(oBg, this.offsetLeft);
};
}
};
var iSpeed=0;
var left=0;

function startMove(obj, iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
iSpeed+=(iTarget-obj.offsetLeft)/5;
iSpeed*=0.7;

left+=iSpeed;

if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1)
{
clearInterval(obj.timer);

obj.style.left=iTarget+'px';

//alert('关了');
}
else
{
obj.style.left=left+'px';
}
}, 30);
}
</script>
</head>
<body>
<ul id="ul1">
<li>首页</li>
<li>关于我们</li>
<li>产品</li>
<li>联系方式</li>
<li class="bg"></li>
</ul>
</body>

效果图

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

标签：

相关文章推荐

新的分享

章节导航