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 相关文章推荐
jquery日历控件实现方法分享
Mar 07 Javascript
js判断浏览器是否支持html5
Aug 17 Javascript
script标签属性用type还是language
Jan 21 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 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文件锁定写入实例解析
2014/07/14 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python处理大数字的方法
2015/05/27 Python
Python中操作符重载用法分析
2016/04/29 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
使用Python实现批量ping操作方法
2020/05/06 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
美国高街时尚品牌:OASAP
2016/07/24 全球购物
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
酒店人事专员岗位职责
2013/12/19 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
迎新生欢迎词
2015/01/23 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
撤诉申请怎么写
2015/05/19 职场文书
MySQL读取JSON转换的方式
2022/03/18 MySQL