html5怎么产生手风琴效果,Html5 js如何实现手风琴效果

Html5 js如何实现手风琴效果

发布时间：2020-08-03 09:54:10

来源：亿速云

阅读：92

作者：小猪

这篇文章主要为大家展示了Html5 js如何实现手风琴效果，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。

* {

padding: 0;

margin: 0;

}

div {

width: 522px;

height: 222px;

margin: 50px auto;

border: 1px solid red;

box-sizing: border-box;

}

ul {

overflow: hidden;

height: 222px;

}

li {

float: left;

height: 222px;

list-style: none;

box-sizing: border-box;

}

h4 {

width: 50px;

float: left;

height: 222px;

border: 1px solid green;

box-sizing: border-box;

}

img {

width: 0px;

float: left;

}

.img {

width: 220px;

}

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

var imgs = document.querySelectorAll("img");

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

//给所有的li标签添加点击事件

lis[i].onclick = function () {

//将所有的图片宽度设置为0

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

imgs[i].style.width = "0px";

}

//将当前点击li标签中的img标签设置宽度为220px

this.querySelector("img").style.width = "220px";

}

以上就是关于Html5 js如何实现手风琴效果的内容，如果你们有学习到知识或者技能，可以把它分享出去让更多的人看到。

html5怎么产生手风琴效果,Html5 js如何实现手风琴效果相关推荐

html放大镜效果代码,js实现简单放大镜效果
用js实现简单放大镜效果,供大家参考,具体内容如下此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩,图片的一个区域就会被放大,然后展示在右边.当鼠标移动时右边的大图片也会局部移动.这里的放大 ...
html图片翻页效果代码,js图片翻书效果代码分享
这是一款基于javascript实现图片翻书效果代码,图片可以从左右两个方向进行切换,用户还可以自定义对应图片的标题与文字说明,是一款非常实用的图片特效源码. 七夕情人节也可以是表白的神器,放一些回忆 ...
html玫瑰花效果代码,html5渲染3D玫瑰花情人节礼物js特效代码
情人节马上就要到来了,这里给程序员前端设计师们献上一个,html5渲染而成的3D玫瑰花js效果,可以作为虚拟的情人节礼物送给自己的爱人.支持html5的浏览器查看. 查看演示下载资源: 16 次下 ...
html5 图片局部马赛克,javascript - JS实现马赛克图片效果完整示例
主要介绍了JS实现马赛克图片效果,结合完整实例形式分析了JavaScript基于HTML5 canvas图形元素绘制实现马赛克效果相关操作技巧,需要的朋友可以参考下本文实例讲述了JS实现马赛克图片效 ...
html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
html5页面可见xing,【前端资源网页插件】全屏滚动效果H5FullscreenPage.js
前提: 介于现在很多活动都使用了类似全屏滚动效果尤其在微信里面我自己开发了一个快速构建此类项目的控件与市面上大部分控件不同的是此控件还支持元素的动画效果并提供多种元素效果基于zepto. ...
类似蚂蚁森林html5游戏源码,js仿照蚂蚁森林效果
如图js仿照蚂蚁森林效果 css ** 葫芦籽动画效果 */ /* animation */ .a-swing{-webkit-animation:1s ease;-moz-animation:1 ...
html5局部放大图片,js实现图片局部放大效果详解
图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积. 如上图,可以看到,这是放大镜的基本效果,主要分成左右两个部分.左边 ...

html5怎么产生手风琴效果,Html5 js如何实现手风琴效果

1

2

3

4

5

6

html5怎么产生手风琴效果,Html5 js如何实现手风琴效果相关推荐

最新文章

热门文章