js动画(三)
咳咳咳咳,感冒了感冒了,鼻塞,蓝瘦啊!嘴巴也开裂,哎,心疼自己。想到这是第三只唇膏了!只怪,放荡不倔爱自由,
行驶在冷风路上么,北风那个吹啊吹啊吹啊,好了,发神经发完了,接下来进入正题,严肃脸。(字数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动画(三)的更多相关文章
- JS动画理论
动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...
- [学习笔记]js动画实现方法,作用域,闭包
一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...
- js动画(四)
终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...
- JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构
JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...
- js动画---多物体运动
对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...
- 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM
JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...
- WebGL three.js学习笔记 加载外部模型以及Tween.js动画
WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...
- 显示层封装及实现与优化(无动画+css3动画+js动画)
showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 【06-23】js动画学习笔记01
<html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
随机推荐
- DotNetBar教程
DotNetBar是一组用于.NET Framework环境下的一组组件集,利用该组件集能够打造绚丽并且实用的应用程序界面,给开发人员提供极大的便利.关于DotNetBar,详情请参考其官方网站:ht ...
- 常用 SQL语句
Oracle 查看所有表的名字: select table_name from user_tables; 查询特定表的名字:select * from (select table_name t fro ...
- “strcmp()” Anyone?
“strcmp()” Anyone? strcmp() is a library function in C/C++ which compares two strings. It takes two ...
- kinect for windows - DepthBasics-D2D详解
引自:http://blog.csdn.net/itcastcpp/article/details/20282667 Depth在kinect中经常被翻译为深度图,指的是图像到摄像头的距离,这些距离数 ...
- cURL: Learning..
CURL usage.. -v, -m, -H, -I, -s, --connect-timeout, -x, -X GET|POST, -d, -T, -o. --retry, -u curl [o ...
- hdu 2612(Find a way)(简单广搜)
Find a way Time Limit : 3000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Total Su ...
- List<Map>去重排序
数据格式 [ { "id":"d3e8a9d6-e4c6-4dd8-a94f-07733d3c1b59", "parentId":" ...
- nginx配置文件【转载】
转自 nginx的配置和使用 - chabale的专栏 - 博客频道 - CSDN.NEThttp://blog.csdn.net/chabale/article/details/8954226 #运 ...
- generic type
http://docs.oracle.com/javase/tutorial/java/generics/wildcardGuidelines.html
- Processes and Threads (转)
http://www.cnblogs.com/xitang/archive/2011/09/24/2189460.html 原文 http://developer.android.com/guide/ ...