JavaScript实现手风琴效果


Posted in Javascript onFebruary 18, 2021

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

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
按给定几率进行随机抽取的js代码
Dec 28 Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
Javascript设计模式之原型模式详细
Oct 05 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 #Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
Feb 14 #Javascript
如何在 Vue 中使用 JSX
Feb 14 #Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 #Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 #Vue.js
详解ES6实现类的私有变量的几种写法
Feb 10 #Javascript
微信小程序实现点赞业务
Feb 10 #Javascript
You might like
PHP Token(令牌)设计
2008/03/15 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
Python实现包含min函数的栈
2016/04/29 Python
Python中字符串的修改及传参详解
2016/11/30 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
如何写python的配置文件
2020/06/07 Python
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
幼儿园安全责任书
2014/04/14 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
租房协议书范文
2014/08/20 职场文书
与美同行演讲稿
2014/09/13 职场文书
学习十八大演讲稿
2014/09/15 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
慈善献爱心倡议书
2015/04/27 职场文书