JS——缓慢动画封装案例
手风琴
1、排他思想
2、ul宽度需要大一点，防止li撑开跑下去
3、一个变大其他所有变小，变小不能太小，不然会出现空白
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} div {
width: 1200px;
margin: 150px auto;
border: 1px solid #CC6153;
overflow: hidden;
} ul {
width: 1300px;
height: 460px;
list-style: none;
} li {
float: left;
width: 240px;
height: 460px;
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var div = document.getElementsByTagName("div")[0];
var ul = div.children[0];
var liArr = ul.children;
for (var i = 0; i < liArr.length; i++) {
liArr[i].style.background = "url('images/" + (i + 6) + ".jpg') no-repeat";
liArr[i].onmouseover = function () {
for (var j = 0; j < liArr.length; j++) {
animate(liArr[j], {"width": 120});
}
animate(this, {"width": 800})
}
liArr[i].onmouseout = function (ev) {
for (var j = 0; j < liArr.length; j++) {
animate(liArr[j], {"width": 240});
}
}
} //参数变为2个，将属性atrr和值都存储到json中
function animate(ele, json, fn) {
//先清定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//开闭原则
var bool = true;
//遍历属性和值，分别单独处理json
//attr == k(键) target == json[k](值)
for (var k in json) {
//四部
var leader = parseInt(getStyle(ele, k)) || 0;
//1.获取步长
var step = (json[k] - leader) / 10;
//2.二次加工步长
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
//3.赋值
ele.style[k] = leader + "px";
//4.清除定时器
//判断: 目标值和当前值的差大于步长，就不能跳出循环
//不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
// if (json[k] !== leader) {
// bool = false;
// }
if (Math.abs(json[k] - leader) > Math.abs(step)) {
bool = false;
}
}
console.log(1);
//只有所有的属性都到了指定位置，bool值才不会变成false；
if (bool) {
for (k in json) {
ele.style[k] = json[k] + "px";
}
clearInterval(ele.timer);
//所有程序执行完毕之后执行回调函数
//现在只有传递了回调函数，才能执行
if (fn) {
fn();
}
}
}, 5);
} function getStyle(ele, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(ele, null)[attr];
}
return ele.currentStyle[attr];
}
</script>
</body>
</html>
仿360开机
1、首先下盒子高度变为0，之后整体盒子宽度变为0
2、本例子没有用图片，最好盒子以图片形式为好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} .box {
width: 200px;
height: 300px;
position: fixed;
bottom: 0;
right: 0;
} span {
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 20px;
font: 400 18px/20px "simsun";
text-align: center;
background-color: #ccc;
} .up, .down {
width: 200px;
height: 150px;
font: 400 23px/150px "simsun";
text-align: center;
background-color: #ccc;
} </style>
</head>
<body>
<div class="box">
<span>×</span>
<div class="up">上盒子</div>
<div class="down">下盒子</div>
</div>
<script>
var span = document.getElementsByTagName("span")[0];
var box = span.parentNode;
var down = box.children[2];
//开始让下盒子的高度变成0 之后让大盒子宽度变为0
span.onclick = function () {
animate(down, {"height": 0}, function () {
animate(box, {"width": 0})
});
} //参数变为2个，将属性atrr和值都存储到json中
function animate(ele, json, fn) {
//先清定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//开闭原则
var bool = true;
//遍历属性和值，分别单独处理json
//attr == k(键) target == json[k](值)
for (var k in json) {
//四部
var leader = parseInt(getStyle(ele, k)) || 0;
//1.获取步长
var step = (json[k] - leader) / 10;
//2.二次加工步长
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
//3.赋值
ele.style[k] = leader + "px";
//4.清除定时器
//判断: 目标值和当前值的差大于步长，就不能跳出循环
//不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
// if (json[k] !== leader) {
// bool = false;
// }
if (Math.abs(json[k] - leader) > Math.abs(step)) {
bool = false;
}
}
console.log(1);
//只有所有的属性都到了指定位置，bool值才不会变成false；
if (bool) {
for (k in json) {
ele.style[k] = json[k] + "px";
}
clearInterval(ele.timer);
ele.style.display = "none";
//所有程序执行完毕之后执行回调函数
//现在只有传递了回调函数，才能执行
if (fn) {
fn();
}
}
}, 15);
} function getStyle(ele, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(ele, null)[attr];
}
return ele.currentStyle[attr];
}
</script>
</body>
</html>
JS——缓慢动画封装案例的更多相关文章
- JS——缓慢动画封装
在知道如何获取内嵌式和外链式的标签属性值之后,我们再次封装缓慢动画: 单个属性 <!DOCTYPE html> <html> <head lang="en&qu ...
- 【转】第7篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：全自动注册与反射方法分析
作者: 牛A与牛C之间 时间: 2013-12-12 分类: 技术文章 | 2条评论 | 编辑文章 主页 » 技术文章 » 第7篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- js运动动画
原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...
- 好用的jquery.animateNumber.js数字动画插件
在做公司的运营报告页面时,有一个数字累计增加的动画效果,一开始,毫无头绪,不知如何下手,于是上网查资料,发现大多都是用的插件来实现的,那么今天,我也来用插件jquery.animateNumber.j ...
- 使用WebGL + Three.js制作动画场景
使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...
- JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
- js双层动画幻灯
js双层动画幻灯 点击下载
随机推荐
- hdu3303
分析:一个最暴力的想法是把加入到集合S的数据一个个按顺序保存起来,然后每次查询的时候由后向前计算余数,如果遇到余数为0的,就直接把时间输出,否则就一直比较到最后找余数最小时间最晚的,这样查询的时间复杂 ...
- 20180725利用pmm监控管理mysql
转自:https://www.percona.com/doc/percona-monitoring-and-management/architecture.html 报警机制https://www.p ...
- SAP Portal 上传资源到WRR
Uploading Resources to the Web Resource Repository Prerequisites You have been assigned the Content ...
- XA transaction ，JTA ， two phase commit ， GTX0-j
本文主要是对以前一直迷惑的几个名字的学习. xa transaction 简单查了一下,大概就是 distributed transaction. 相比传统的transaction而言,传统的tra ...
- Java数组备忘录
前言 近期用Java做ACM题目的时候,常常忘记数组怎样实现静态初始化,所以这里记录一下Java数组使用的常识. Java数组常识 数组在Java中是一个对象,数组实例须要通过new操作符进行创建. ...
- excel 补全全部空格
首先全选列或者选中某列,按F5键.再按"定位条件„"button,选择空值,这样就把全部列的空格选中了,然后直接输入"你想要替换的值",再按Ctrl + 回车
- C++之：友元类
一.文章来由 上一篇写了友元函数,这一次写一个姊妹篇,继续深入探究一下友元类. 二.定义 友元类的全部成员函数都是还有一个类的友元函数.都能够訪问还有一个类中的隐藏信息(包含私有成员和保护成员). 当 ...
- ios dyld: Library not loaded: @rpath/xxx.framework/xxx 之根本原因
碰到问题 dyld: Library not loaded: @rpath/xxx.framework/xxx Referenced from: /var/containers/Bundle/Appl ...
- ADT 压缩包 R23.0.0
http://pan.baidu.com/s/1qWLjs2w
- 算法题：打印1到最大的n位数
说明:本文仅供学习交流,转载请标明出处,欢迎转载! 今天看到剑指offer上的第12题,题目例如以下: 输入数字n.按顺序打印出从1到最大的n位十位数. 比方输入3,则打印 ...