第十节 JS运动中级
链式运动框架、
回调函数
运动停止时，执行函数
运动停止时，开始下一次运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运动框架</title>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
<script src="32.js"></script>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1'); //链式运动——收缩展开运动
oDiv.onmouseover = function(){
startMove(oDiv, 'width', 300, function(){
// alert('宽度已变大！');
startMove(oDiv, 'height', 300, function () {
startMove(oDiv, 'opacity', 100);
});
});
};
oDiv.onmouseout = function(){
startMove(oDiv, 'opacity', 30, function(){
// alert('宽度已变大！');
startMove(oDiv, 'height', 100, function () {
startMove(oDiv, 'width', 100);
});
});
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
}
function startMove(obj, attr, iTarget, fnEnd) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var cur = 0;
if (attr == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr))*100); //乘以100符合咱们平时对opacity的设置
} else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (iTarget-cur)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if (cur==iTarget) {
clearInterval(obj.timer);
if (fnEnd) fnEnd();//当参数传进来且运动结束后被调用
} else {
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:'+(cur+speed)+')'; //IE透明度
obj.style.opacity = (cur+speed)/100;
var oTxt = document.getElementById('txt1');
oTxt.value = obj.style.opacity;
} else {
obj.style[attr] = cur+speed+'px';
}
}
}, 30);
}
32.js
例子：土豆天气预报弹窗（已下架） 由于图片没有调好就没有写，有兴趣可根据上述代码自行写出
完美运动框架
多个值同时变化（首先是出错情况）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运动框架小问题</title>
<style>
#div1{width: 100px;
height: 100px;
background: red;
}
</style>
<script src="32.js"></script>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1'); oBtn.onclick = function () {
startMove(oDiv, 'width', 300);
startMove(oDiv, 'height', 300);
};
//问题来了，如果不加此句“startMove(oDiv, 'height', 300);” 则div变宽，好像没什么问题；
//但是如果加上此句“startMove(oDiv, 'height', 300);” div只变长了，而未变宽，所以也就是说，
//不能让多个值同时变化，否则会出错，解决办法是：用json循环来修改运动框架
};
</script>
</head>
<body>
<input id="btn1" type="button" value="运动"/>
<div id="div1"></div>
</body>
</html>
setStyle同时设置多个属性
参数传递：JSon的使用，for in遍历属性
var json = {a:12, b:5};
for (var i in json){ //json循环
alert(i+'='+json[i]);
}
运用到运动框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运动框架小问题</title>
<style>
#div1{width: 100px;
height: 100px;
background: red;
filter: alpha(Opacity=30);
opacity: 0.3;
}
</style>
<script src="33.js"></script>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1'); oBtn.onclick = function () {
// startMove(oDiv, 'width', 300);
// startMove(oDiv, 'height', 300);
startMove(oDiv, {width: 300, height: 300, opacity: 100}); //此时长和宽是同时运动的
};
//问题来了，如果不加此句“startMove(oDiv, 'height', 300);” 则div变宽，好像没什么问题；
//但是如果加上此句“startMove(oDiv, 'height', 300);” div只变长了，而未变宽，所以也就是说，
//不能让多个值同时变化，否则会出错，解决办法是：用json循环来修改运动框架，解决如上
};
</script>
</head>
<body>
<input id="btn1" type="button" value="运动"/>
<div id="div1"></div>
</body>
</html>
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
}
//32.js的改进版，json循环的使用
//startMove(oDiv, {width: 400, height: 400})
function startMove(obj, json, fnEnd) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
for (var attr in json) {
var cur = 0;
if (attr == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr))*100); //乘以100符合咱们平时对opacity的设置
} else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (json[attr]-cur)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if (cur==json[attr]) {
clearInterval(obj.timer);
if (fnEnd) fnEnd();//当参数传进来且运动结束后被调用
} else {
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:'+(cur+speed)+')'; //IE透明度
obj.style.opacity = (cur+speed)/100;
var oTxt = document.getElementById('txt1');
oTxt.value = obj.style.opacity;
} else {
obj.style[attr] = cur+speed+'px';
}
}
}
}, 30);
}
33.js
说“33.js”是一个完美运动框架，那是因为在一般应用情况下，该运动框架是不会出现什么错误，但是若我们把“startMove(oDiv, {width: 300, height: 300, opacity: 100});”改为“startMove(oDiv, {width: 101, height: 300, opacity: 100});”也就是说，宽度只增加一个像素，高度仍然增加200像素，此时运行时，高度的增加会出现一些小错误，即不会增加到300px，原因是，系统不会自己搜索每个状态是不是已经达到目标值，而是只要有一个达到目标值，系统就把定时器关掉了，所以才会出现错误，改进方法如下：（其中改进版的“33-1.js”，才是真正意义上的完美运动框架）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完美运动框架</title>
<style>
#div1{width: 100px;
height: 100px;
background: red;
filter: alpha(Opacity=30);
opacity: 0.3;
}
</style>
<script src="33-1.js"></script>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1'); oBtn.onclick = function () {
startMove(oDiv, {width: 101, height: 300, opacity: 100}, function () { //此时长、宽和透明度同时运动
alert("定时器已全部关闭！"); //该函数是检验程序是否运行完成的。
});
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="运动"/>
<div id="div1"></div>
</body>
</html>
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
}
function startMove(obj, json, fnEnd) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var bStop = true; //假设所有的值都已经到了
for (var attr in json) {
var cur = 0;
if (attr == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr))*100); //乘以100符合咱们平时对opacity的设置
} else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (json[attr]-cur)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if (cur != json[attr]) //如果有一个值不等于目标值
bStop = false;
// if (cur==json[attr]) {
// clearInterval(obj.timer);
//
// if (fnEnd) fnEnd();//当参数传进来且运动结束后被调用
// } else {
// 改进提前关定时器的代码如下，先把之前关定时器的代码注释掉
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:'+(cur+speed)+')'; //IE透明度
obj.style.opacity = (cur+speed)/100;
} else {
obj.style[attr] = cur+speed+'px';
}
obj.style[attr] = cur+speed+'px';
// }
}
if (bStop) { //如果bStop还是保持为true的话
clearInterval(obj.timer);
if (fnEnd) fnEnd();
}
}, 30);
}
33-1.js
检测运动停止（标志变量） 例子：伸缩同时淡入淡出的菜单，如上
运动框架总结：
运动框架的演变过程：
startMove(iTarget) 运动框架 //学习入门
startMove(obj, iTarget) 多物体 //多出的参数“obj”可以任意指定让那个物体动起来
startMove(obj, attr, iTarget) 任意值 //可以任意指定一个物体动起来
startMove(obj, attr, iTarget, fn) 链式运动 //参数“fn”为当 前一次 运动结束之后，我们可以用“fn”再做一次运动
startMove(obj, json) 多值运动 //可以把多个值同时运动
startMove(obj, json, fn) 完美运动框架 //可以多值、多物体同时运动了
运动框架应用：
例：幻灯片
思想是：overflow=hidden，当显示 第0张图片时，top=0；当显示第1张图片时，第0张的top=-150；……当显示第n张图片时，第0张的top=-150*n；
链式运动：新浪微博
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>li淡出淡入</title>
<style>
*{margin: 0; padding: 0;}
#ul1{
width: 400px;
height: 400px;
border: 1px solid black;
margin: 10px auto;
overflow: hidden;
}
#ul1 li{
border-bottom: 1px #999 dashed;
padding: 4px;
list-style: none;
overflow: hidden;
filter: alpha(opacity:0);
opacity: 0;
}
</style>
<script src="33-1.js"></script>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ul1');
var oTxt = document.getElementById('txt1'); oBtn.onclick = function () {
var oLi = document.createElement('li'); oLi.innerHTML = oTxt.value;
oTxt.value = ''; if (oUl.children.length>0){
oUl.insertBefore(oLi, oUl.children[0]);
} else {
oUl.appendChild(oLi);
} //运动
var iHeight = oLi.offsetHeight;
//先让高度展开
oLi.style.height = '0'; //链式运动的应用
startMove(oLi, {height: iHeight}, function () { //先是高度展开，然后淡出
startMove(oLi, {opacity: 100});
}); };
};
</script>
</head>
<body>
<textarea id="txt1" rows="4" cols="40"></textarea>
<button id="btn1">发布</button>
<ul id="ul1">
<li>asldfjkba</li>
</ul>
</body>
</html>
第十节 JS运动中级的更多相关文章
- 第九节 JS运动应用
多物体运动框架 多个物体同时运动 例子:多个Div,鼠标移入变宽 单定时器,存在问题 每个Div一个定时器 <!DOCTYPE html> <html lang="en&q ...
- 第三百五十节，Python分布式爬虫打造搜索引擎Scrapy精讲—selenium模块是一个python操作浏览器软件的一个模块，可以实现js动态网页请求
第三百五十节,Python分布式爬虫打造搜索引擎Scrapy精讲—selenium模块是一个python操作浏览器软件的一个模块,可以实现js动态网页请求 selenium模块 selenium模块为 ...
- 第三百八十节，Django+Xadmin打造上线标准的在线教育平台—将所有app下的models数据库表注册到xadmin后台管理
第三百八十节,Django+Xadmin打造上线标准的在线教育平台—将所有app下的models数据库表注册到xadmin后台管理 将一个app下的models数据库表注册到xadmin后台管理 重点 ...
- 第三百七十节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索结果分页
第三百七十节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索结果分页 逻辑处理函数 计算搜索耗时 在开始搜索前:start_time ...
- 第三百一十节，Django框架，模板语言
第三百一十节,Django框架,模板语言 模板语言就是可以将动态数据在html模板渲染的语言 一.接收值渲染 locals()函数,写在请求响应render()函数里,可以将逻辑处理函数里的变量传到h ...
- centos LAMP第二部分apache配置 下载discuz！配置第一个虚拟主机 安装Discuz！ 用户认证 配置域名跳转 配置apache的访问日志 配置静态文件缓存 配置防盗链 访问控制 apache rewrite 配置开机启动apache tcpdump 第二十节课
centos LAMP第二部分apache配置 下载discuz!配置第一个虚拟主机 安装Discuz! 用户认证 配置域名跳转 配置apache的访问日志 配置静态文件缓存 配置防盗链 ...
- ASP.NET MVC深入浅出（被替换） 第一节: 结合EF的本地缓存属性来介绍【EF增删改操作】的几种形式 第三节: EF调用普通SQL语句的两类封装（ExecuteSqlCommand和SqlQuery ) 第四节: EF调用存储过程的通用写法和DBFirst模式子类调用的特有写法 第六节: EF高级属性(二) 之延迟加载、立即加载、显示加载(含导航属性) 第十节: EF的三种追踪
ASP.NET MVC深入浅出(被替换) 一. 谈情怀-ASP.NET体系 从事.Net开发以来,最先接触的Web开发框架是Asp.Net WebForm,该框架高度封装,为了隐藏Http的无状态 ...
- 带无缝滚动的轮播图（含JS运动框架）
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- js运动框架之一条乱跑的虫子
克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...
随机推荐
- go关键字之select
select是Go中的一个控制结构,类似于switch语句,用于处理异步IO操作.select会监听case语句中channel的读写操作,当case中channel读写操作为非阻塞状态(即能读写)时 ...
- Spark RDD的默认分区数：（spark 2.1.0）
本文基于Spark 2.1.0版本 新手首先要明白几个配置: spark.default.parallelism:(默认的并发数) 如果配置文件spark-default.conf中没有显示的配置,则 ...
- Cookiecutter: 更好的项目模板工具：（2）安装及基础使用
安装 通过python包管理工具 命令行输入 $pip install cookiecutter 或者 # mac os经常会禁止用户全局安装python包 $pip install --user c ...
- I - The lazy programmer 贪心+优先队列
来源poj2970 A new web-design studio, called SMART (Simply Masters of ART), employs two people. The fir ...
- mac重启，开启apache时报错~~~镜像没有找到
mac重启apache时,报类似下面的错 dyld: Library not loaded: /usr/local/lib/libjpeg8.dylib Referenced from: /usr/l ...
- git从已有分支拉新分支开发
开发过程中经常用到从master分支copy一个开发分支,下面我们就用命令行完成这个操作: 1. 切换到被copy的分支(master),并且从远端拉取最新版本 $git checkout maste ...
- 关于vue执行打包后，如何在本地浏览问题
最近一个人在捣鼓vue,写完项目后发现在npm run dev下可以正常访问,bulid之后却一片空白,查看console出现许多Failed to load resource: net::ERR_F ...
- winform中按钮透明的方法
把Button设为透明的方法:1.修改 FlatAppearance属性下的BorderSize 为0 修改 FlatStyle 的属性为 Flat 2. /// <summary>// ...
- Linux服务器上搭建web项目环境
一.下载并安装jdk 去官网下载linux系统上jdk的安装包jdk-8u181-linux-x64.tar.gz,在Linux的/usr目录下新建文件夹java,可以使用命令:cd /usr ...
- linux+nginx+phpfpm 访问出现Access denied错误解决方案
linux上安装nginx,php-fpm后访问页面一直出现Access denied错误. 网上搜原因大概如下图: 我试了第一个方案,然后就好了.