第十节 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秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...
随机推荐
- 如何在 Fiddler Script 中 自定义 修改 Request 、 Response
Fiddler是一个http协议调试代理工具,方便进行http请求的拦截处理.改写请求.返回值等. 在Rules菜单下: 此次更改请求 头 ,so go to OnBeforeRequest 或者 ...
- puppet(1)-简介
puppet: 开源的.新一代的集中化的配置管理工具: 目标状态 配置语言 Luke Kanies,puppet labs bootstrap --> configuration --> ...
- socket详解（二）----实例和多线程，线程池使用
一般而言,Java 语言中的套接字有以下两种形式: TCP 套接字(由 Socket 类实现,) UDP 套接字(由 DatagramSocket 类实现) TCP 和 UDP 扮演相同角色,但做法不 ...
- 11.17 flask (1)
2018-11-17 18:38:42 开始学习进行玩前面项目 开始进军flask flask是一个小型的web框架,,但是有很多第三方组件 最后组装组装就和django一样啦!!!!!!! pyt ...
- B - Tree Recovery
Little Valentine liked playing with binary trees very much. Her favorite game was constructing rando ...
- poj1321_kuagnbin带你飞专题一
棋盘问题 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 43565 Accepted: 21163 Descriptio ...
- <?php if($value['udertype'] == 0) {?> <td>超级管理员</td> <?php } else if ($value['udertype'] == 1)
<?php if($value['udertype'] == 0) {?> <td>超级管理员</td> <?php } else if ($value['u ...
- python 写入Excel
一.安装xlrd模块: 1.mac下打开终端输入命令: pip install XlsxWriter 2.验证安装是否成功: 在mac终端输入 python 进入python环境 然后输入 imp ...
- js 日期排序(sort)
按创建时间日期排序 例如 eg 1.升序 2.降序 返回的结果: 注: 支持IE和Chrome其他的浏览器可自行测试
- SetTimer API函数
位于user32.dll中,可以每隔一段时间执行一段时间执行一件事的时候,可以使用它. 使用定时器,通常告诉Windows一个时间间隔,然后Windows以此时间间隔周期性触发程序. 发送WM_TIM ...