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 ...
随机推荐
- SQL Server 分页语句
表中主键必须为标识列,[ID] int IDENTITY (1,1) 1.分页方案一:(利用Not In和SELECT TOP分页) SELECT TOP 页大小 * FROM TestTable ...
- prototype小解
prototype由来 在理解prototype前,首先得理解js面向对象编程的私有变量.私有函数,静态变量.静态函数,以及实例变量,实例函数 私有变量,私有函数 函数内部通过var定义的变量 fun ...
- js设置全局变量ajax中赋值
js设置全局变量,在ajax中给予赋值赋值不上问题解决方案 方案一. //在全局或某个需要的函数内设置Ajax异步为false,也就是同步. $.ajaxSetup({async : false}); ...
- Springmvc默认首页的问题
之前自己写的springmvc 默认首页都是偷懒方式: web.xml 中定义的默认首页: <welcome-file-list> <welcome-file>index.ht ...
- IO流---字符流(FileWriter, FileReader ,BufferedWriter,BufferedReader)
IO Input Output IO流用来处理设备之间的数据传输. java对数据的操作是通过流来实现的. 流按流向分:输入流,输出流 是相对内存而言的.把硬盘的数据读取到内存中就是输入 ...
- php fsockopen
1.PHP fsockopen函数说明: Open Internet or Unix domain socket connection(打开套接字链接) Initiates a socket conn ...
- [转]理解SSL(https)中的对称加密与非对称加密
加密 解密 Tweet 密码学最早可以追溯到古希腊罗马时代,那时的加密方法很简单:替换字母. 早期的密码学 古希腊人用一种叫 Scytale 的工具加密.更快的工具是 transposition ...
- 文字在边界自动换行word-wrap:break-word
div容器内中内容将在边界内换行,(word-wrap)英语句子中单词内不强制换行.(word-break)如果需要词内换行
- [LeetCode] Magical String 神奇字符串
A magical string S consists of only '1' and '2' and obeys the following rules: The string S is magic ...
- nginx slab内存管理
本来这一篇作为nginx系列的开头是不合适的,不过由于nginx进程框架自己的梳理还没完成,这部分又刚好整理完了,就从这开始吧.这儿谈的是nginx的slab的内存管理方式,这种方式的内存管理在ngi ...