html css 和js共同实现手风琴

手风琴模式在网页中偶尔可以见到，下面就来一起实现手风琴。

首先找到 5张图片，在body里放一个背景图片。在body写一个ul>li*5。这里html和css就不具体介绍了直接上图。

实现手风琴主要是js部分。

1.先获取所有li标签，声明下标showIndex。

2遍历li标签使用for循环（var i=0;i<lis.length;i++）

3.给open下标showindex；当触发点击onclick事件，open的类名变为空。点击的this.className=“open”

4将showIndex=lis【i】.index

5.将body背景图替换

实现效果如下：

完整代码发在下面：

body {

height: 100vh;

background-image: url(img/c1.webp);

background-size: cover;

background-position: center;

display: flex;

justify-content: center;

align-items: center;

}

ul {

width: 800px;

height: 400px;

}

li {

width: 80px;

height: 100%;

float: left;

background-size: cover;

background-position: center center;

transition: .3s;

}

.open {

width: 480px;

}

li p {

width: 80px;

height: 100%;

background-color: rgba(255, 255, 255, .5);

color: white;

font-size: 60px;

}

</style>

</head>

<body>

<ul>

寿司全家福

</li>

海鲜全家福

</li>

炒花蛤

</li>

辣白菜

</li>

披萨

</li>

</ul>

</body>

var lis = document.querySelectorAll('li');

var showIndex = 0; //当前open的下标

for (var i = 0; i < lis.length; i++) {

// if (showIndex === this.index) {

// return;

// }

lis[i].index = i; //动态为li添加下标

lis[i].onclick = function() {

// 收起来已经展开的li

// 1.for (var j = 0; j < lis.length; j++) {

// lis[j].className = "";

// }

// 2.动态添加下标

lis[showIndex].className = "";

// 展开点击的li

this.className = "open";

showIndex = this.index;

// 修改body的背景图

document.body.style.backgroundImage = this.style.backgroundImage;

}

html css 和js共同实现手风琴相关推荐

IE6、IE7、IE8的CSS、JS兼容
Internet Explorer 6中查看使用 Microsoft JScript 的网页,可能会遇到web浏览器速度较慢的性能问题.原因是如果js脚本同时创建大量变量,jscript引擎执行垃圾收 ...
CSS vs. JS Animation: 哪个更快
CSS vs. JS Animation: 哪个更快? CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且 ...
js和html以及css的区别,html、css、js中的区别与关系
html.css.js中的区别与关系 2020/04/26 作者: 互盟股份今天小盟给大家分享的是html.css.js中的区别与关系,相信很多人都不太了解,为了让大家更加了解html.css.js ...
php替换时 css中的图片不显示不出来,URL重写：CSS，JS和图像未加载
我遵循规则 .htaccess Options +FollowSymLinks RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAM ...
介绍html CSS和JS的定义或引用
现在的网页设计,一般采用内容与表现相分离,即网页的组成包含:内容(HTML)+ 样式(CSS) + 脚本(JS) . 浏览器解析原理服务器接收到HTML->解析HTML结构建DOM树-> ...
使用Minify合并css和js减少http请求
一个页面可能包含很多的css和js文件,如果能够合并这些文件,能够大大减少网站的http请求,减少日志的产生和用户体验的提高. Minify就是一个能够合并css或js为一个文件的工具,不但可以合并, ...
你可能不知道的5种 CSS 和 JS 的交互方式
翻译人员: 铁锚翻译日期: 2014年01月22日原文日期: 2014年01月20日原文链接: 5 Ways that CSS and JavaScript Interact That You ...
判断CSS与JS是否加载完毕的方法
简单而有效的思路:三步走一.显示默认提示:直接在页面上标识一个友好的提示:例如xxx,系统加载未完成,建议您刷新后再进行yy操作二.css加载完毕:对提示内容进行处理:例如红色提示变..黄色警告 ...
解决修改css或js文件，浏览器缓存更新问题。
解决修改css或js文件,浏览器缓存更新问题. 参考文章: (1)解决修改css或js文件,浏览器缓存更新问题. (2)https://www.cnblogs.com/zhangycun/p/7427 ...

html css 和js共同实现手风琴

html css 和js共同实现手风琴相关推荐

最新文章

热门文章