javascript 实现手风琴特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
div {
width: 1150px;
height: 400px;
margin: 50px auto;
border: 1px solid #ddd;
overflow: hidden;
}
ul {
list-style: none;
}
div ul {
width: 1300px;
}
div li {
width: 240px;
height: 400px;
float: left;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div> <script src="animate.js" charset="utf-8"></script>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
var liArr = div.getElementsByTagName("li");
//给li添加背景颜色
var colorArr = ["mistyrose", "lemonchiffon", "gold", "orange", "tomato"];
for (var i = 0; i < colorArr.length; i++) {
liArr[i].style.backgroundColor = colorArr[i]; //绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他的盒子变窄
liArr[i].onmouseover = function(){
//排他思想
for (var j = 0; j < liArr.length; j++) {
//引用框架实现宽度变窄
animate(liArr[j],{"width": 100});
}
//剩下自己
animate(this,{"width": 800});
}
}
//移开大盒子，回复原样
div.onmouseout = function(){
for (var j = 0; j < liArr.length; j++) {
//引用框架实现宽度变窄
animate(liArr[j],{"width": 240});
}
}
</script>
</body>
</html>
javascript 实现手风琴特效的更多相关文章
- javascript中手风琴特效
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 图片每天换及纯css3手风琴特效
<a target="_blank" id="a"><img id="img" /></a> <s ...
- JavaScript实战-菜单特效
以下是我自己用原生JS写的各种菜单特效,虽然网上一搜一大堆,但我还是喜欢自己来写一写! 这是上一篇:JavaScript实战(带收放动画效果的导航菜单) 下面是经过优化后的完整代码,优化了CSS样式. ...
- javascript学习-原生javascript的小特效（原生javascript实现链式运动）
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...
- javascript学习-原生javascript的小特效（多个运动效果整理）
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...
- 一款点击图片进行无限循环的jquery手风琴特效
一款点击图片进行无限循环的jquery手风琴特效,点击手风琴折合点,可以无限循环的点击下去,很炫酷的手风琴哟! 还有每张图片的文字介绍,因为兼容IE6所以找来分享给大家这个jquery特效. 适用浏览 ...
- 动漫网站基于jquery的横向手风琴特效
今天给大家分享一款动漫网站基于jquery的横向手风琴特效.这款手风琴特效适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...
- 《JavaScript网页经典特效300例》
<JavaScript网页经典特效300例> 基础篇 进阶篇 高级篇
- javascript图片展示墙特效
查看效果:http://hovertree.com/code/javascript/pwl4bhoi.htm 代码如下: <!DOCTYPE html> <html> < ...
随机推荐
- 软件工程-pair work[附加题]
首先,在分组之前,我和室友周敏轩已经详细阅读了往届学长的博客,认为电梯调度这个项目应该先做UI会比较好一点,于是动手展开了UI的编写;但分组结果并没有如我们所愿,但我们依然共同进行了UI的编写,希望在 ...
- FileUtils功能概述
https://commons.apache.org/proper/commons-io/javadocs/api-release/org/apache/commons/io/FileUtils.ht ...
- js选择排序。
<script> , , , , , , , ]; ; j<len; j++ ){ // 假设min为最小值 var minIndex = j; var min = arr[j]; ...
- TCP 三次握手理解和过程
1:TCP为什么要三次握手,不是两次四次? 2:TCP协议三次握手过程分析
- QQ互联登录提示redirect uri is illegal(100010)完美解决方法
大概2015年3月低,腾讯QQ互联开发平台调整了有关QQ登录应用回调地址填写规则,用来修复QQ登录过程因回调地址的漏洞可能导致存在的安全问题. 博主接触这块较多,但也是四月才了解此事,从4月起,所有新 ...
- 详解Windows不重启使环境变量修改生效(经典)
在“我的电脑”->“属性”->“高级”->“环境变量”中增加或修改环境变量后,需重启系统才能使之生效.有没有什么方法可让它即时生效呢?下面介绍一种方法: 以修改环境变量“PATH”为 ...
- JIRA & GitHub
JIRA & GitHub https://confluence.atlassian.com/adminjiracloud/connect-jira-cloud-to-github-81418 ...
- js輸出
js訪問html的某個元素,使用document.getElementByID(); document.write()僅僅向文檔輸出內容,如果在頁面已經加載后輸出,原來頁面的內容會被覆蓋. docum ...
- MT【63】证明不是周期函数
证明$f(x)=sinx^2$不是周期函数. 反证:假设是周期函数,周期为$T,T>0$. $$f(0)=f(T)\Rightarrow sinT^2=0\Rightarrow T^2=k_1\ ...
- 安装workflowmanager 1.0 server
1· 下载安装 Web Platform Installer v4 Command Line (WebPICMD.exe) Tool.(http://download.microsoft.com/do ...