java手风琴代码_JavaScript实现手风琴效果

本文实例为大家分享了JavaScript实现手风琴效果的具体代码，供大家参考，具体内容如下

代码：

Document

* {

margin: 0;

padding: 0;

}

ul {

width: 100%;

text-align: center;

}

ul li {

list-style: none;

overflow: hidden;

display: inline-block;

transition: all 1s;

}

var ul = document.querySelector("ul");

var imgs = ["img/img4.jpg", "img/img5.jpg", "img/img6.jpg", "img/img7.jpg", "img/img8.jpg", "img/img9.jpg", ];

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

var li = document.createElement("li");

var img = document.createElement("img");

img.src = imgs[i];

li.appendChild(img);

ul.appendChild(li);

}

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

window.onload = window.onresize = function() {

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

lis[i].style.width = (ul.offsetWidth / imgs.length) - 10 + "px";

}

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

for (let i = 0; i < imgM.length; i++) {

imgM[i].onmouseenter = function() {

for (var j = 0; j < imgM.length; j++) {

lis[j].style.width = ((ul.offsetWidth - imgM[i].offsetWidth) / (imgs.length - 1)) - 10 + "px";

}

lis[i].style.width = imgM[i].offsetWidth + "px";

}

imgM[i].onmouseleave = function() {

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

lis[i].style.width = (ul.offsetWidth / imgs.length) - 10 + "px";

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

java手风琴代码_JavaScript实现手风琴效果相关推荐

java手风琴代码_[Java教程]18款jquery抽屉式手风琴导航特效代码
[Java教程]18款jquery抽屉式手风琴导航特效代码 0 2015-11-12 21:00:05 jquery hover抽屉式导航图片展开收缩代码 jQuery仿瑞丽鼠标滑过图片手风琴展开特效 ...
java swing最小化_Java swing 窗口最小化到任务栏点击右键显示菜单（复制代码即可运行查看效果）...
Java swing 窗口最小化到任务栏点击右键显示菜单(复制代码即可运行查看效果) package swing; import java.awt.AWTException; import java ...
陌陌安全开源了 Java 静态代码安全审计插件
近日,陌陌安全开源了 Java 静态代码安全审计插件 MOMO Code Sec Inspector,侧重于在编码过程中发现项目潜在的安全风险,并提供一键修复能力. MOMO 安全团队认为,绝大部分 ...
Java中实现六种图像处理的效果（灰度化、马赛克效果、去背景实现、珠纹化实现、黑白版画效果、油画效果）
** Java中实现六种图像处理的效果(灰度化.马赛克效果.去背景实现.珠纹化实现.黑白版画效果.油画效果) ** 本文的编程的思想: 先将实现这六种效果的方法写入一个名为pic_performanc ...
devc代码补全没效果_从零开始写文本编辑器（二十八）：自动补全（上）
前言我本没打算这么早就写"自动补全"功能的. 但是在写XML资源编辑时,为了实现自动引用已有资源@string/xxx,需要一个合适的列表来让我选择.这样能防止拼写错误. 也就是 ...
常见的Java审计代码函数关键字_转载：Java代码审计汇总系列(一)——SQL注入
原文链接:https://cloud.tencent.com/developer/article/1534109 一.代码审计相比黑盒渗透的漏洞挖掘方式,代码审计具有更高的可靠性和针对性,更多的是依 ...
奇数阶幻方 java_N（奇数）阶幻方-java实现代码
看完最强大脑,有一期是说N阶幻立方的,作为一个程序员,我的第一反应时我可以用程序实现,在此公布N(奇数)阶幻方的java实现代码: package com.lzugis.test; public cl ...
java 代码块同步,Java 同步代码块
Java 同步代码块 1 什么是Java同步代码块同步代码块可用于对方法的任何特定资源执行同步. 假设您的方法中有50行代码,但是您只想同步5行,则可以使用synchronized代码块. 如果将方 ...
Java垂直镜像,Java OpenCV实现图像镜像翻转效果
本文实例为大家分享了Java OpenCV实现图像镜像翻转效果的具体代码,供大家参考,具体内容如下主要使用OpenCV的flip()方法,可以实现图像的垂直.水平以及同时垂直镜像翻转. flip是C ...
java 静态代码块有什么用,java编程开发静态代码块的使用方法都有哪些
代码块是程序员在学习java编程开发的时候会接触到的一个代码,而今天我们就通过案例分析来了解一下,java编程开发静态代码块的使用方法都有哪些. (一)java静态代码块静态方法区别一般情况下,如果 ...

java手风琴代码_JavaScript实现手风琴效果

java手风琴代码_JavaScript实现手风琴效果相关推荐

最新文章

热门文章