由浅入深JavaScript14进阶-复杂运动
来源:互联网 发布:花形透 知乎 编辑:程序博客网 时间:2024/06/05 10:55
JavaScript运动
JS复杂运动,包括多物体任意值运动和链式运动
多物体任意值运动
多个物体任意样式运动
要点:
在原有运动框架上,添加一个name参数用来实现任意值的传递
以下例子我们在上一期例子中多物体运动加以升级、
可以看到我们这三个div不仅都可以运动,而且运动的方面
不同,但是我们只写了一份运动框架,充分复用了代码,关键点就在于
我们把运动的样式当成参数传递
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 10px;
font-size: 14px;
}
</style>
<script>
window.onload = function(){
var divs = document.getElementsByTagName('div');
divs[0].onmouseover = function(){
move(this,'height',400);
}
divs[1].onmouseover = function(){
move(this,'width',400);
}
divs[2].onmouseover = function(){
move(this,'fontSize',48);
}
divs[0].onmouseout = function(){
move(this,'height',100);
}
divs[1].onmouseout = function(){
move(this,'width',100);
}
divs[2].onmouseout = function(){
move(this,'fontSize',14);
}
}
function move(obj,name,target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var currentStyle = parseInt(getCssStyle(obj,name));
var speed = (target-currentStyle)/7;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(currentStyle>=800){
clearInterval(obj.timer);
}else{
obj.style[name] = currentStyle+speed+'px';
}
},30)
}
function getCssStyle(obj,name){
var finalStyle = document.currentStyle||getComputedStyle(obj,null);
return finalStyle[name];
}
</script>
</head>
<body>
<div>变高</div>
<div>变宽</div>
<div>字体变大</div>
</body>
</html>
JS链式运动
完成一个运动进行下一个运动
要点:回调函数
一个阶段运动完成,开始调用下一阶段运动函数
两点改动,一是调用方式上,二是运动框架上
完成了物体先变高然后变宽然后变字体的运动
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 10px;
font-size: 14px;
}
</style>
<script>
window.onload = function(){
var divs = document.getElementsByTagName('div');
divs[0].onmouseover = function(){
move(this,'height',400,function(){
move(divs[0],'width',400,function(){
move(divs[0],'fontSize',48);
});
});
}
divs[0].onmouseout = function(){
move(this,'fontSize',14,function(){
move(divs[0],'width',100,function(){
move(divs[0],'height',100);
});
});
}
divs[1].onmouseover = function(){
move(this,'height',800,function(){
move(divs[1],'width',800,function(){
move(divs[1],'fontSize',48);
});
});
}
divs[1].onmouseout = function(){
move(this,'fontSize',14,function(){
move(divs[1],'width',100,function(){
move(divs[1],'height',100);
});
});
}
}
function move(obj,name,target,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var currentStyle = parseInt(getCssStyle(obj,name));
var speed = (target-currentStyle)/7;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(currentStyle==target){
clearInterval(obj.timer);
if(fn)fn();//一个阶段完成去调用回调函数
}else{
obj.style[name] = currentStyle+speed+'px';
}
},30)
}
function getCssStyle(obj,name){
var finalStyle = document.currentStyle||getComputedStyle(obj,null);
return finalStyle[name];
}
</script>
</head>
<body>
<div>先变高然后变宽然后变字体</div>
<div>先变高然后变宽然后变字体</div>
</body>
</html>
JS运动总结
JS运动的本质:不断改变元素的样式
不断:定时器
样式:style
JS匀速运动
JS变速运动
JS多物体运动
JS多物体任意值运动
JS链式运动
说在最后的话:
本博会开一个JS专栏:《大神前端:JavaScript板块》长期更新,由浅入深带大家系统的学习JavaScript,
做出多彩的JS特效。
如果对你有用就关注一下专栏吧,我会不断的更新,后期还有其他版块。
http://blog.csdn.net/column/details/15918.html
想深入,系统全面的学习JS,博友们可以在CSDN搜索我的课程《多彩JavaScript》@_@。
http://edu.csdn.net/course/detail/5619
限于文章篇幅原因,这里仅仅介绍冰山一角。由于笔者的水平有限,编写时间也很仓促,
文中难免会出现一些错误或者不准确的地方,不妥之处恳请读者批评指正
JS复杂运动,包括多物体任意值运动和链式运动
多物体任意值运动
多个物体任意样式运动
要点:
在原有运动框架上,添加一个name参数用来实现任意值的传递
以下例子我们在上一期例子中多物体运动加以升级、
可以看到我们这三个div不仅都可以运动,而且运动的方面
不同,但是我们只写了一份运动框架,充分复用了代码,关键点就在于
我们把运动的样式当成参数传递
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 10px;
font-size: 14px;
}
</style>
<script>
window.onload = function(){
var divs = document.getElementsByTagName('div');
divs[0].onmouseover = function(){
move(this,'height',400);
}
divs[1].onmouseover = function(){
move(this,'width',400);
}
divs[2].onmouseover = function(){
move(this,'fontSize',48);
}
divs[0].onmouseout = function(){
move(this,'height',100);
}
divs[1].onmouseout = function(){
move(this,'width',100);
}
divs[2].onmouseout = function(){
move(this,'fontSize',14);
}
}
function move(obj,name,target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var currentStyle = parseInt(getCssStyle(obj,name));
var speed = (target-currentStyle)/7;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(currentStyle>=800){
clearInterval(obj.timer);
}else{
obj.style[name] = currentStyle+speed+'px';
}
},30)
}
function getCssStyle(obj,name){
var finalStyle = document.currentStyle||getComputedStyle(obj,null);
return finalStyle[name];
}
</script>
</head>
<body>
<div>变高</div>
<div>变宽</div>
<div>字体变大</div>
</body>
</html>
JS链式运动
完成一个运动进行下一个运动
要点:回调函数
一个阶段运动完成,开始调用下一阶段运动函数
两点改动,一是调用方式上,二是运动框架上
完成了物体先变高然后变宽然后变字体的运动
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 10px;
font-size: 14px;
}
</style>
<script>
window.onload = function(){
var divs = document.getElementsByTagName('div');
divs[0].onmouseover = function(){
move(this,'height',400,function(){
move(divs[0],'width',400,function(){
move(divs[0],'fontSize',48);
});
});
}
divs[0].onmouseout = function(){
move(this,'fontSize',14,function(){
move(divs[0],'width',100,function(){
move(divs[0],'height',100);
});
});
}
divs[1].onmouseover = function(){
move(this,'height',800,function(){
move(divs[1],'width',800,function(){
move(divs[1],'fontSize',48);
});
});
}
divs[1].onmouseout = function(){
move(this,'fontSize',14,function(){
move(divs[1],'width',100,function(){
move(divs[1],'height',100);
});
});
}
}
function move(obj,name,target,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var currentStyle = parseInt(getCssStyle(obj,name));
var speed = (target-currentStyle)/7;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(currentStyle==target){
clearInterval(obj.timer);
if(fn)fn();//一个阶段完成去调用回调函数
}else{
obj.style[name] = currentStyle+speed+'px';
}
},30)
}
function getCssStyle(obj,name){
var finalStyle = document.currentStyle||getComputedStyle(obj,null);
return finalStyle[name];
}
</script>
</head>
<body>
<div>先变高然后变宽然后变字体</div>
<div>先变高然后变宽然后变字体</div>
</body>
</html>
JS运动总结
JS运动的本质:不断改变元素的样式
不断:定时器
样式:style
JS匀速运动
JS变速运动
JS多物体运动
JS多物体任意值运动
JS链式运动
说在最后的话:
本博会开一个JS专栏:《大神前端:JavaScript板块》长期更新,由浅入深带大家系统的学习JavaScript,
做出多彩的JS特效。
如果对你有用就关注一下专栏吧,我会不断的更新,后期还有其他版块。
http://blog.csdn.net/column/details/15918.html
想深入,系统全面的学习JS,博友们可以在CSDN搜索我的课程《多彩JavaScript》@_@。
http://edu.csdn.net/course/detail/5619
限于文章篇幅原因,这里仅仅介绍冰山一角。由于笔者的水平有限,编写时间也很仓促,
文中难免会出现一些错误或者不准确的地方,不妥之处恳请读者批评指正
阅读全文
1 0
- 由浅入深JavaScript14进阶-复杂运动
- 由浅入深JavaScript14进阶-复杂运动
- 由浅入深JavaScript13进阶-简单运动
- 由浅入深JavaScript11进阶-事件1
- 由浅入深JavaScript12进阶-事件2
- Java 反射由浅入深 | 进阶必备
- redis 由浅入深 之 进阶(服务器)
- JavaScript进阶之--DOM事件、动画(运动框架)
- 由浅入深学 C# ——基础,进阶,必做300题 源代码
- redis 由浅入深 之进阶(发布与订阅、事务、连接和Reids服务器)
- 运动
- 运动
- Android进阶-复杂的UI框架(一)
- 链表面试题(进阶)&&复杂链表的复制
- 在实时渲染场景中的运动物体与复杂地形交互策略
- 正则由浅入深
- MakeFile由浅入深
- 由浅入深-string
- 修剪草坪(单调队列)
- 常用工具函数整理(好多数论什么的公式)
- dubbo--服务提供者类图
- HDU 1024 Max Sum Plus Plus——♂简单♂DP
- hibernate不报错的错误
- 由浅入深JavaScript14进阶-复杂运动
- 51Nod 1239 欧拉函数之和
- 好像是第三天。
- 日期类功能大全
- 关于STM32标准外设库中的 USE_STDPERIPH_DRIVER, STM32F10X_MD
- Scales(dfs背包+剪枝)
- ARM学习笔记四
- MySQL 使用set names 解决乱码问题的原理
- 码农不识贝叶斯,虽知数据也枉然