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 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
jQuery取id有.的值的方法
May 21 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
代码块高亮可复制显示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
星际争霸兵种名称对照表
2020/03/04 星际争霸
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
实例解析php的数据类型
2018/10/24 PHP
javascript中定义类的方法汇总
2014/12/28 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
Python获取任意xml节点值的方法
2015/05/05 Python
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
梅西百货官网:Macy’s
2020/08/04 全球购物
武汉东之林科技有限公司机试
2013/09/17 面试题
环境工程求职简历的自我评价范文
2013/10/24 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
校长寄语大全
2014/04/09 职场文书
活动总结报告格式
2014/05/09 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
Python预测分词的实现
2021/06/18 Python