JavaScript实现手风琴效果

2026-04-23 04:10:39

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

代码：

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  * {
   margin: 0;
   padding: 0;
  }

  ul {
   width: 100%;
   text-align: center;
  }

  ul li {
   list-style: none;
   overflow: hidden;
   display: inline-block;
   transition: all 1s;
  }
 </style>
</head>

<body>
 <ul>

 </ul>
 <script>
  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";
    }
   }
  }
 </script>
</body>

</html>

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

Vue.js手风琴菜单组件开发实例

本文为大家分享了vuejs组件开发之手风琴菜单组件实例,供大家参考,具体内容如下小图标是引入font-awesome字体图标库绘制的.效果如下图所示: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet"
原生JS实现垂直手风琴效果

效果如下: 图 (1) 展开前图 (2) 展开后代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> *{ margin: 0; padding: 0; } .panel { width: 555px; height: auto; background-color: #333333; margin: 50
纯js+html和纯css+html制作手风琴效果

本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下一.纯css+html的手风琴效果这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> <head> <style> body{background: url('bg.gif') repeat;} ul,li,p{margin: 0px;padding: 0px;lis
js实现可折叠展开的手风琴菜单效果

本文实例讲述了js实现可折叠展开的手风琴菜单效果.分享给大家供大家参考.具体如下: 这是一款可折叠展开的菜单,手风琴菜单,运用CSS与JavaScript技术实现的合拢与伸展的网页菜单,代码简洁,来自老外的代码作品,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hidden-show-sfq-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH
炫酷的js手风琴效果

你一定用过书签,也一定给你的书本加过书签,那么你见过书签式的导航吗? 你一定见过手风琴,也一定知道弹奏手风琴时的它的外形变化,那么你见过手风琴式的导航吗? 如果没有,请往下看: 前面的话: 这篇博文先通过Javascript做一个简单的手风琴效果,让大家对手风琴效果有一定的了解:紧接着,我们换jquery做类似的手风琴效果.前面的两个例子都很简单,接下来要放大招了,我想用JQ或是原生的JS去做类似淘宝网中用到的手风琴效果.继续回到书签问题,既然JQ和JS都能实现那么炫酷的效果,我们用CSS3能不
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

ReactJS是Facebook推出的产品.在2013年的Qcon大会(上海)上面,当时Facebook的前端工程师做过一次讲座,就专门介绍了ReactJS. ReactJS可以看做就是用来Render的.ReactJS是可以达到游戏级别的渲染,fps可以保持在60左右,相当的了不起,它做了一个虚拟dom tree加速了渲染过程,根据当时的数据说比angularjs快20%以上. 前沿对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学
js实现简单的手风琴效果

效果图: 图(1)初始图图(2)点击展开效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;font-size:12px;list-s
原生js做的手风琴效果的导航菜单

做好的手风琴效果如下,具体看代码: html代码复制代码代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Accordion</title> <style> #accordion{ width:200px; } #accordion ul{ list-style: none; display:none; } .fir
JS实现图片手风琴效果

''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换. 推拉门收缩状态.png "推拉门"展开状态.png "推拉门"实现方法一:改变图片宽度 html+css代码 <body> <div class="box"> <ul> <!-- <li>!
纯js实现手风琴效果代码

我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢? 但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型项目中就会显现出来,下面我用原生js实现一个简单的手风琴效果效果. HTML代码如下结构非常简单就5个li盒子,js代码会渲染图片上去 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&

JavaScript实现手风琴效果

相关推荐

随机推荐