javascript中手风琴特效
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul {
list-style: none
} * {
margin: 0;
padding: 0;
} div {
width: 1150px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
} div li {
width: 240px;
height: 400px;
float: left;
/*background-image: url(images/1.jpg);*/
} div ul {
width: 1300px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
//找人
var box = document.getElementById("box");
var ul = box.children[0];
var lis = ul.children;
//循环遍历 lis 绑定背景图
for (var i = 0; i < lis.length; i++) {
lis[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
//给每一个li注册鼠标经过事件 鼠标经过后要排他
lis[i].onmouseover = function () {
//干掉所有人 让所有人的宽度 渐渐地 变为100
for (var j = 0; j < lis.length; j++) {
animate(lis[j], {"width": 100});
}
//留下我自己 让我的宽度 渐渐地 变为800
animate(this, {"width": 800});
};
}
//鼠标离开box 所有的li宽度 渐渐地 变为240
box.onmouseout = function () {
for (var i = 0; i < lis.length; i++) {
animate(lis[i], {"width": 240});
}
}; function animate(obj, json) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
//先假设 这一次执行完 所有的属性都到达目标了
var flag = true;
for (var k in json) {
var leader = parseInt(getStyle(obj, k)) || 0;
var target = json[k];
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader + "px";
//if (leader === target) {
// clearInterval(obj.timer);
//}
console.log("代码还在运行");
if (leader != target) {
flag = false;//告诉标记 当前这个属性还没到达
}
}
//如果此时仍然为true 就说明真的都到达了
if (flag) {
clearInterval(obj.timer);
}
}, 15);
}
//全部属性都到达目标值才能清空
function getStyle(obj, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj, null)[attr];
} else {
return obj.currentStyle[attr];
}
}
</script>
</body>
</html>
javascript中手风琴特效的更多相关文章
- javascript 实现手风琴特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用 JavaScript 中的 document 对象查找 HTML 元素,实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时,按钮高亮显示;
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象查找 HTML 元素,实现"登录"按钮的高亮特效 鼠标悬浮于"登录" ...
- 原生JavaScript中动画与特效的实现原理
现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...
- CSS3和javascript中的transform
在javascript中,WebkitTransform 大概相当于 transform .transform 为标准,WebkitTransform 适用于Webkit浏览器.js中的WebkitT ...
- 图片每天换及纯css3手风琴特效
<a target="_blank" id="a"><img id="img" /></a> <s ...
- JavaScript实战-菜单特效
以下是我自己用原生JS写的各种菜单特效,虽然网上一搜一大堆,但我还是喜欢自己来写一写! 这是上一篇:JavaScript实战(带收放动画效果的导航菜单) 下面是经过优化后的完整代码,优化了CSS样式. ...
- javascript学习-原生javascript的小特效(原生javascript实现链式运动)
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...
- javascript学习-原生javascript的小特效(多个运动效果整理)
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...
- 了解javascript中的事件(二)
本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...
随机推荐
- CGContext与上下文
上下文指的是场景拥有的资源或属性. 上下文的操作包含上下文的设置: 和上下文的引用. 上下文是一个结构体. 主要包含结构体的设置和使用.
- 关于pc端 app端pdf,word xls等文件预览的功能
第一种用H5标签<iframe>标签实现 返回的文件类型,文件流,文件流返回必须在设置 contentType对应的Mime Type, 返回文件的物理位置. 已经实测可以支持的文件类型 ...
- 解决time命令输出信息的重定向问题
解决time命令输出信息的重定向问题 time命令的输出信息是打印在标准错误输出上的, 我们通过一个简单的尝试来验证一下. [root@web186 root]# time find . -name ...
- BFS与DFS模板
搜索问题的解法 DFS(深度优先搜索) BFS(广度优先搜索) backtracking(回溯) DFS模板 void dfs(...) { // 结束递归的条件 if (...) { ..... / ...
- 洛谷P1200 [USACO1.1]你的飞碟在这儿Your Ride Is He…
题目描述 众所周知,在每一个彗星后都有一只UFO.这些UFO时常来收集地球上的忠诚支持者.不幸的是,他们的飞碟每次出行都只能带上一组支持者.因此,他们要用一种聪明的方案让这些小组提前知道谁会被彗星带走 ...
- luogu 4884 多少个1 (BSGS)
很有意思的一个签到题 然而考场上并没有切掉 $1111...111=K(mod\;m)$ $10^{x}=9K+1(mod\;m)$ 用$BSGS$求解即可 模数爆了$int$,需要快速乘,然而模数是 ...
- [USACO08FEB]修路Making the Grade 动态规划
对的\(n^3\)的程序调了一个月了,惊了... HSZ学oi\(\Longleftrightarrow\)闭眼学oi 要不是翻旧账还看不见.. 这是有\(n^2\)做法的. 参见LYD的书P244 ...
- Linux 文件压缩
压缩工具 compress/uncompress:对应 .Z 结尾的压缩格式文件 压缩格式:gz.bz2.xz.zip.Z gzip 压缩文件并删除源文件(生成.gz的文件) gunzip 解 ...
- 1、认识和安装MongoDB
MongoDB简介:MongoDB是一个基于分布式文件存储的数据库,由C++语言编写.目的是为WEB应用提供扩展的高性能的数据存储解决方案.MongoDB是一个介于关系型数据库和非关系型数据库之间的产 ...
- InitializingBean 和 DisposableBean 指定初始化和销毁方法
通过实现 InitializingBean 和 DisposableBean 接口,也可以指定 bean 的初始化和销毁方法 二.Student 类 public class Student impl ...