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> < ...
随机推荐
- EL表达式和JSTL标签库
expresion language表达式语言 可以输出表达式的值.跟jsp的表达式脚本一样.计算表达式的值后输出. EL表达式出现的目的是为了使JSP写起来更加简单,让jsp的代码更佳简化. 1. ...
- git学习笔记——廖雪峰git教程
OK,先附上教程--廖雪峰的官方网站 友情连接:git官网 简介 这里我只想引用他的原文: Linus可以向BitMover公司道个歉,保证以后严格管教弟兄们,嗯,这是不可能的.实际情况是这样的: L ...
- String系列-----AbstractStringBuilder
1. AbstractStringBuilder是StringBuffer和StringBuilder的父类 package com.amazing.jdk.string_2017_12_31; im ...
- [转帖]/etc/security/limits.conf的含义
https://www.cnblogs.com/pzk7788/p/7250723.html /etc/security/limits.conf 是 Linux 资源使用配置文件,用来限制用户对系统资 ...
- [自学]Docker system 命令 查看docker镜像磁盘占用情况 Docker volume 相关
内容From https://docs.docker.com/engine/reference/commandline/system_df/ docker的image和docker的container ...
- 软件工程_8th weeks
第八周PSP 个人时间管理 由于本周主要在做论文实验,除了学习时间外有一些零散的时间也在思考代码的书写以及论文实验的流程,但是这些零散的时间并没有在总的表记录,所以想问一下老师,像这种平时零散思考的时 ...
- node upgrade bug & node-sass
node upgrade bug & node-sass bug solution rebuild $ npm rebuild node-sass OK
- chart.js & canvas
chart.js & canvas https://www.chartjs.org/samples/latest/ https://www.chartjs.org/samples/latest ...
- codeforces625C
K-special Tables CodeForces - 625C 人们经常做一些疯狂的事来凸显自己.有的人跳舞,有的人撩妹,有的人立志成为顶级程序猿(例如某peng),还有的人喜欢收集有趣的数学对 ...
- TP5报错总结
LNMP一键安装包上部署TP5项目500错误或者空白解决 [问题原因] TP5的入口文件在public下,当他调用类文件时,跨目录所以造成500错误,或者一片空白的问题 [解决方法] 1.public ...