咳咳咳咳,感冒了感冒了,鼻塞,蓝瘦啊!嘴巴也开裂,哎,心疼自己。想到这是第三只唇膏了!只怪,放荡不倔爱自由,

行驶在冷风路上么,北风那个吹啊吹啊吹啊,好了,发神经发完了,接下来进入正题,严肃脸。(字数150应该凑够了。)

js链式运动

代码如下 :

<style>
#lia {
width: 200px;
height: 100px;
background: red;
opacity: 0.3;
}
</style>
<script>
window.onload = function() {
var qwe = document.getElementById("lia");
qwe.timer = null;
qwe.opacity=30;
/*以下,就是控制代码*/
qwe.onmouseover = function() {
onStart(qwe,"width",400,10,function(){/*这里控制,宽,目标值,速度,以及下一个动画*/
onStart(qwe,"height",300,10,function(){/*这里控制,长,目标值,速度,以及下一个动画*/
onStart(qwe,"opacity",100,10);/*这里控制,透明度,目标值,速度,以及下一个动画,当然以上顺序可以换*/
                                                                }); 
});
}
			qwe.onmouseout = function() {/*这里不解释,跟上面一样*/
onStart(qwe,"opacity",30,-10,function(){
onStart(qwe,"height",100,-10,function(){
onStart(qwe,"width",200,-10);
});
});
} } function getStyle(obj, attr) { /*obj对象,就是你要搞哪个元素,attr属性,你要搞哪个的属性*/
if(obj.currentStyle) {
return obj.currentStyle[attr]; /*.currentStyle针对IE*/
} else {
return getComputedStyle(obj,false)[attr]; /* getComputedStyle针对firebox浏览器*/ }
}
/*这个呢,是昨天的彩蛋,挺好用的,具体的功能就是,取对象的样式属性值,很好用*/
function onStart(obj,attr, mu,speed,fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if(parseInt(getStyle(obj,"width")) == mu)
{
if(fn){
fn() /*这里就是,关键,就是执行下一个,函数的功能,我在这里创建一个空函数,
具体函数内容交给主函数来写,所以这个函数,再多传一个参数,来判断,
是否需要执行下一个函数
*/
}
else{
clearInterval(obj.timer);
}
}
else if(parseInt(getStyle(obj,"height")) == mu)
{
if(fn){
fn()
}
else{
clearInterval(obj.timer);
}
}
else if(obj.opacity == mu){
clearInterval(obj.timer);
if(fn){
fn();
}
}
else{
if(attr == "opacity"){
obj.opacity+=speed;
obj.style.opacity = obj.opacity/100;
}
else if(attr == "width"){
obj.style.width = parseInt(getStyle(obj,"width"))+speed+"px";
}
else if(attr == "height"){
obj.style.height = parseInt(getStyle(obj,"height"))+speed+"px";
}
/*这里就是把三个功能给他合成在一个函数里,所以上述的fn(),执行的函数还是本身,只不过选择不同功能罢了 这里其实还可以优化,前面提到getStyle(),可以取到,对象的样式属性值,所以,可以把height和width整合起来。
*/
}
}, 30)
}
</script>

今天为什么把css的代码也放上来呢?

只是手误而已,嘿嘿嘿。若尝试有问题,对比css解决。

js动画(三)的更多相关文章

  1. JS动画理论

    动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...

  2. [学习笔记]js动画实现方法,作用域,闭包

    一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...

  3. js动画(四)

    终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...

  4. JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构

    JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...

  5. js动画---多物体运动

    对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...

  6. 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM

    JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...

  7. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  8. 显示层封装及实现与优化(无动画+css3动画+js动画)

    showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  9. 【06-23】js动画学习笔记01

    <html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...

  10. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

随机推荐

  1. DotNetBar教程

    DotNetBar是一组用于.NET Framework环境下的一组组件集,利用该组件集能够打造绚丽并且实用的应用程序界面,给开发人员提供极大的便利.关于DotNetBar,详情请参考其官方网站:ht ...

  2. 常用 SQL语句

    Oracle 查看所有表的名字: select table_name from user_tables; 查询特定表的名字:select * from (select table_name t fro ...

  3. “strcmp()” Anyone?

    “strcmp()” Anyone? strcmp() is a library function in C/C++ which compares two strings. It takes two ...

  4. kinect for windows - DepthBasics-D2D详解

    引自:http://blog.csdn.net/itcastcpp/article/details/20282667 Depth在kinect中经常被翻译为深度图,指的是图像到摄像头的距离,这些距离数 ...

  5. cURL: Learning..

    CURL usage.. -v, -m, -H, -I, -s, --connect-timeout, -x, -X GET|POST, -d, -T, -o. --retry, -u curl [o ...

  6. hdu 2612(Find a way)(简单广搜)

    Find a way Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Su ...

  7. List<Map>去重排序

    数据格式 [ { "id":"d3e8a9d6-e4c6-4dd8-a94f-07733d3c1b59", "parentId":" ...

  8. nginx配置文件【转载】

    转自 nginx的配置和使用 - chabale的专栏 - 博客频道 - CSDN.NEThttp://blog.csdn.net/chabale/article/details/8954226 #运 ...

  9. generic type

    http://docs.oracle.com/javase/tutorial/java/generics/wildcardGuidelines.html

  10. Processes and Threads (转)

    http://www.cnblogs.com/xitang/archive/2011/09/24/2189460.html 原文 http://developer.android.com/guide/ ...