第十节 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秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...
随机推荐
- 【Excel】输出固定长文本
'******************************************************************************* ' 固定長形式テキストファイル書き出す ...
- Linux usb子系统(二) _usb-skeleton.c精析
"./drivers/usb/usb-skeleton.c"是内核提供给usb设备驱动开发者的海量存储usb设备的模板程序, 程序不长, 通用性却很强,十分经典, 深入理解这个文件 ...
- Qt编写自定义控件2-进度条标尺
前言 进度条标尺控件的应用场景一般是需要手动拉动进度,上面有标尺可以看到当前进度,类似于qslider控件,其实就是qslider+qprogressbar的杂交版本,不过我才用的是纯qpainter ...
- xcode8 iOS函数返回值使用警告
没有使用返回值时, 警告 swift: @warn_unused_result func doSomething() -> Bool { return true } OC: - (BOOL)do ...
- Laravel 5.4设置logout注销账户的重定向路径
当我们修改Laravel默认Auth默认路径时,在点击logout按钮注销时,默认跳转的地址为项目的根目录, 若想设置成自定义的重定向路径,可以按照如下设置: 方法一: 在Auth \ LoginCo ...
- 11.14 luffycity项目(6)
2018-11-14 21:26:45 实现了购物车功能! 涉及到了redis的使用 需要在pycharm中下载 django_redis 其他的看一下笔记,有购物车里面数据存储的结构才发现数据 ...
- cf954H
挖我自闭了这是什么东西啊. 给出一棵深度为 的树,其中深度为 的节点有 个儿子.问树上的简单路径中长度在 之间的每个有多少条. 表示对于在 层的 个节点,向下走 步的方案数 表示对于 ...
- antd-mobile Picker组件默认值
import { createForm } from "rc-form"; @createForm() class TopAdSlots extends Component { @ ...
- oracle ORA-01991错误--重建密码文件问题
问题现象描述: 统计服务器测试没问题,刚好上次配置系统的时候有点问题,故重装一次,配置好安全策略(最近在研究如何新配置一台服务器的时候,第一时间配置好相关的安全设置,有空再写下来). 为了省事,直接冷 ...
- sublime3 快速运行 java
build 系统 Java.sublime-build { "cmd": ["javac $file_name && java $file_base_na ...