链式运动的一些思路

前面的一些运动都是只完成一种运动,完成后一般就不会在增加其他运动,在实际中可能会有多种情况,如果想要一个对象完成一个运动后,再接着完成另外一个运动,这时可以考虑用链式运动框架实现一些功能,最主要的还是在定时器封装的函数里再增加一个参数作为传值,一般这个参数是函数,下面这个小例子:

function setMove(obj,arr,iTarget,fun){         //设置多个参数,第二个参数为要改变的样式,链式运动框架
var timer = null;
clearInterval(obj.timer);                 //关闭当前的定时器
obj.timer = setInterval(function(){           //为当前div设置定时器
var iCurr=0;
if(arr==‘opacity‘){
//parseFloat()取浮点数
var iCurr = parseInt(parseFloat(getStyle(obj,arr))*100);       //透明度单独处理,将小数转换成整数
}else{
var iCurr = parseInt(getStyle(obj,arr));                //这里就是获取的当前div的宽度
}
var iSpeed = (iTarget-iCurr)/15;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);       //将当前的速度转化成整型值
//Math.ceil向上取整,Math.floor向下取整
if(iCurr==iTarget){
clearInterval(obj.timer);                       //清除当前div的定时器
if(fun){                              //先检测是否有这个参数,有的话就执行,否则就不执行
fun();                               //在每次一个运动完成后,又执行这个运动,依次进行
}
}else{
if(arr==‘opacity‘){
obj.style.fliter = ‘alpha(:‘+(iCurr+iSpeed)+‘)‘;             //这里是用整数表示
obj.style.opacity = (iCurr+iSpeed)/100;                  //这里使用小数表示
}
obj.style[arr]= iCurr+iSpeed+‘px‘;                 //将div的宽以一定速度增加
}
},50);

上面这段小代码就是加入了一个函数作为参数的运动的函数实体,这样可以在每次运动完成后,在接着完成另外一个运动,用这样一个小框架基本能实现。

如下面这这个小例子,用函数作为一个参数:

<script type="text/javascript">
window.onload = function()
{
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var oDiv3 = document.getElementById("div3");
oDiv1.onmouseover = function(){
setMove(oDiv2,‘left‘,80,function(){
oDiv3.style.display="block";               //在运动之前,要先将它展现出来
setMove(oDiv3,‘top‘,50);                //用到了定位
});
};
oDiv3.onclick = function(){
setMove(oDiv3,‘top‘,-200,function(){         //点击的时候做反向运动
setMove(oDiv2,‘left‘,-150);
})
};
};
</script>

当然会有更多这方面的应用,可以提供一些思路

时间: 2024-10-11 02:12:00

链式运动的一些思路的相关文章

HTML+JavaScript实现链式运动特效

在学习js的过程中,发现这家伙做特效真是不错,虽然说目前水平还不够,不过也能写点简单的效果.今天分享一个简单的运动框架,然后利用这个框架实现简单的链式运动特效. 1.move.js 在运动框架中,主要进行长宽变化和透明度的变化.长宽的变化可以实现DIV的体积运动变化效果,透明度的话主要是在鼠标移入移出事件中添加淡入淡出的效果.我将这个简单的运动框架封装到一个单独的js文件中,方便调用. 先看看代码: <span style="font-family:KaiTi_GB2312;"&

运动回调-链式运动

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width:100px; height: 100px; background: red;

JS模拟土豆弹窗——链式运动

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS模拟土豆弹窗——链式运动</title> <style> *{padding: 0; margin: 0;} body{ font-size: 12px; font-family: "微软雅黑"; overflow: hidden;} #foot{ width:

Javascript 链式运动框架——逐行分析代码,让你轻松了运动的原理

所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动.这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascript 代码 function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } } funct

链式运动实例 运动框架应用 微博

源代码: <!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="Con

多元素多属性的链式缓冲

链式运动: 所谓链式运动,也即元素的可运动属性一个接着一个的发生变化,有其一定的需求性.前面所学的缓动函数无法满足链式运动的需求,缓动函数的叠加与定时器分配(一个元素只有一个定时器)之间构成了矛盾,造成只有最后一个缓动函数有效的局面. 为了能够实现链式运动,需要重新封装缓动函数.整体的思路是,在缓动函数中加一个可选的函数参数,当传入该函数时,则在一个属性变化完成后调用. 这样之后,每个缓动函数后面都可以再跟一个缓动函数,类似于递归,直至不再传递缓动函数. 页面布局和样式部分: <!DOCTYPE

objective-c 一个链式加法计算器实现

一个链式加法计算器实现思路 1.使用时的效果 Calculate * manger=[Calculate new]; int result=manger.add(123).add(123).sub(123).result; 输出结果为:result:123 2.实现方法 新建Calculate类: 添加一个属性@property(nonatomic,assign) int result,作为计算结果: 因为使用的方式为 result=manger.add(123).add(123).sub(12

JS动画之链式运动与同时运动

一.链式运动所谓的链式运动,就是在平常的动画运动函数最后在传入一个参数,当第一个动画运动运动完后,检测一下有没有继续传入的参数,如果有的话就继续运行这个参数,这样重复下去就可以完成一套链式运动        var Li=document.getElementById("li1");        Li.onmouseover=function(){            startMove(Li,"width",400,function(){          

JS之链式运动,及任意值运动框架,包括透明度的改变

链式运动,顾名思义,一环扣一环,即执行完一个事件后,再接着执行下一个事件,在参数上面动手脚,将下一个要执行的函数名作为一个参数,即利用到回掉函数,下面代码中出现的fn,即回掉函数, 1 function move(obj,attr,target,fn){ 2 clearInterval(obj.timer); 3 obj.timer = setInterval(function(){ 4 var iCur=0; 5 if (attr == 'opacity') { 6 iCur=parseInt