js运动-多物体运动
2015-05-16 17:48
351 查看
基本步骤
1.通过getElementsByTagName获取到要做多物体运动的元素2.然后for循环遍历元素,添加事件
3.定义startMove函数,需要两个参数,当前“做运动”的元素,和目标值target
注意问题:在多物体运动中,所有的东西不能公用;
<script>
window.onload = function(){
var liTags = document.getElementsByTagName('li'); // 第一步
for(var i=0;i<liTags.length;i++){ // 第二步
liTags[i].onmouseover = function () {
startMove(this,400);
}
liTags[i].onmouseout = function () {
startMove(this,200);
}
}
}
var timer = null;
function startMove(obj,iTarget) { // 第三步,2个参数
clearInterval(timer);
timer = setInterval(function () {
var iSpeed = (iTarget - obj.offsetWidth)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 缓冲运动注意取整处理
if(obj.offsetWidth == iTarget){
clearInterval(timer);
}else{
obj.style.width = obj.offsetWidth+iSpeed+'px';
}
},30);
}
</script>
问题:
当移入移出速度比较快的时候,就会出现有的li回不到原来的样子,卡在半路了;这是因为所有的li公用了一个定时器造成的;
当鼠标移入第一个li时,调用startMove开启一个定时器;鼠标移除li时,也需要开启一个定时器让li回到原来的位置,li走到半路上,我们移入第二个li,首先会清除定时器,这时候第一个li就卡到半路了。
解决这个问题:让每个li拥有自己的timer去控制他们的变化,在for循环的时候,给每个里定义自己的一个timer
liTags[i].timer = null;// 给每个li都添加一个timer
接着在starMove里面每次用的定时器都是当前li 自己的,就不会互相干扰了。
这里由之前的timer变成了obj.timer (当前对象自己的timer);到这里就没问题了。
完整代码如下:
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
加点样式:
<style>
ul{list-style: none;}
ul li{
margin: 10px;
width: 200px;height: 50px;
background: lightblue;
}
</style>
完整js代码
<script>
window.onload = function(){
var liTags = document.getElementsByTagName('li');
for(var i=0;i<liTags.length;i++){
liTags[i].timer = null;// 给每个li都添加一个timer
liTags[i].onmouseover = function () {
startMove(this,400);
}
liTags[i].onmouseout = function () {
startMove(this,200);
}
}
}
function startMove(obj,iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var iSpeed = (iTarget - obj.offsetWidth)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
if(obj.offsetWidth == iTarget){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth+iSpeed+'px';
}
},30);
}
</script>
接着在看一个例子:多物体运动-改变透明度
<script>window.onload = function () {
var aImgs = document.getElementsByTagName('img');
for(var i=0;i<aImgs.length;i++){
aImgs[i].timer = null;
aImgs[i].alpha = 100; // 把公用的alpha改成每个img对象都有的属性
aImgs[i].onmouseover = function () {
startMove(this,30);
}
aImgs[i].onmouseout = function () {
startMove(this,100);
}
}
}
// var alpha = 100; 这里alpha在多物体运动里 不能公用
function startMove(obj,iTarget) {
clearInterval(obj.timer);
var iSpeed = (iTarget - obj.alpha)/10;
iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed);
obj.timer = setInterval(function(){
if(obj.alpha == iTarget){
clearInterval(obj.timer);
}else{
obj.alpha += iSpeed;
obj.style.opacity =obj.alpha/100;
obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
}
},30);
}
</script>
相关文章推荐
- js动画---多物体运动
- Js运动动画系列5--多物体运动-透明度
- JS实现多物体运动的方法详解
- 模拟真实物体运动的js动画库插件-Anima
- js中封装多物体运动及透明度变化函数
- 点滴积累【JS】---JS小功能(JS实现多物体缓冲运动)
- 学习js运动多个物体宽度变化笔记
- js完美多物体运动框架(缓冲运动)
- JS运动之多物体框架--多个div变宽
- (42)JS运动之多物体框架--多个div变宽
- js封装多物体运动函数
- JS多物体运动
- JS实现简单的多物体运动动画
- Js运动动画系列7--多物体运动-设置样式属性做不同的运动
- JS实现多物体缓冲运动实例代码
- js运动-改变透明度(单物体)
- js多个物体运动功能实例分析
- 物体任意值运动框架(包括透明度)move.js
- js运动技术--多物体运动框架(变宽、变高、改变字体、改变border、透明度)以及替换offset的使用
- js多个物体运动的问题1