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双层动画幻灯 点击下载
随机推荐
- HTML5：表格
表格的作用是显示二维数据.在HTML5中不再同意用表格控制页面内容的布局.而是採用新增的CSS表格特性(这里不涉及CSS,将在后面介绍). 以下主要介绍用于制作表格的HTML元素. 构建表格 表格的基 ...
- [Vue-rx] Switch to a Function which Creates Observables with Vue.js and Rxjs
Wrapping the creation of an Observable inside of a Function allows you delay the creation of the Obs ...
- D3js-API介绍【中】
JavaScript可视化图表库D3.js API中文參考,d3.jsapi D3 库所提供的全部 API 都在 d3 命名空间下.d3 库使用语义版本号命名法(semantic versioning ...
- Solid Edge如何制作爆炸图
1 最方便的方式是自动爆炸 点击应用程式-"爆炸-涂彩-动画" 选择要爆炸的对象(默认是顶层组立件),要爆炸的距离(默认系统根据零件大小自动生成距离,你也可以手动设定距离)即可 ...
- Java---15---单例设计模式：---饿汉式和懒汉式
概念: 单例模式确保某个类仅仅有一个实例.并且自行实例化并向整个系统提供这个实例. 单例模式有下面特点: 1.单例类仅仅能有一个实例 2.单例类必须自己给自己创建自己的唯一实例 3.单例类必须给全 ...
- C#之out和ref区别
out与ref的区别总结:1.两者都是通过引用来传递.2.两者都按地址传递的,使用后都将改变原来参数的数值.3.属性不是变量,因此不能作为 out或ref 参数传递.4.若要使用 ref 或 out, ...
- zoj3605 Find the Marble --- 概率dp
n个杯子.球最開始在s位置.有m次换球操作,看到了k次,看的人依据自己看到的k次猜球终于在哪个位置,输出可能性最大的位置. dp[m][k][s]表示前m次操作中看到了k次球终于在s的频率. #inc ...
- 【http代理报文】自己开发HTTP代理工具，不限语种。
我们知道通过修改浏览器设置可以使用代理访问网页,其实这个操作就是修改了每次的HTTP头. 工作中,我们难免需要通过TCP/IP协议发送HTTP报文来直接请求网页内容(比如爬虫工具),有同学问如何通过H ...
- c++ vector数组的定义使用
/* *********************************************** Author :guanjun Created Time :2017/3/18 13:32:52 ...
- NOI.AC #31. MST
好像又是神仙dp....gan了一早上 首先这是个计数类问题,上DP, 对于一个最小生成树,按照kruskal是一个个联通块,枚举边小到大合成的 假如当前边是树边,那么转移应该还是枚举两个块然后合并 ...