JS——【案例】手风琴|鼠标悬停图片滚动展示栏 [技术栈:html、css、JavaScript]

极客编程_毕设大师兄

已于 2022-11-28 13:07:14 修改

阅读量336

点赞数 2

分类专栏： # JavaScript 文章标签： javascript css html

于 2022-11-09 17:03:04 首次发布

heart000_1

本文链接：https://blog.csdn.net/weixin_53920044/article/details/127773432

版权

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

案例

4 篇文章 0 订阅

订阅专栏

效果图：

在这里插入图片描述

代码：


<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>手风琴</title>
  <style>
    ul {
      list-style: none;
    }

    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 1200px;
      height: 400px;
      margin: 50px auto;
      border: 1px solid red;
      overflow: hidden;
    }

    div li {
      width: 240px;
      height: 400px;
      float: left;
      transition: all 1000ms; /*过渡*/
    }

    div ul {
      width: 1200px;
    }
  </style>
</head>

<body>
  <div id="box">
    <ul>
      <li>
        <a href="#">
          <img src="./images/1.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/2.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/3.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/4.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/5.jpg" alt="">
        </a>
      </li>
    </ul>
  </div>
</body>
<script>
	/*预期分析：1鼠标经过的小li宽度变大为800px，其他变100px
	2鼠标离开时，所有小li都要复原宽度*/
	
	//(1)获取元素
	let lis = document.querySelectorAll('li')
	//(2)绑定鼠标经过和离开事件
	for (let i = 0; i < lis.length; i++) {
		//(3)鼠标经过
		lis[i].addEventListener('mouseenter',function(){
			//排他思想，干掉所有，复活自己
			for (let j = 0; j < lis.length; j++) {
				lis[j].style.width = '100px'
			}
			this.style.width = '800px'
		})
		
		//(4)鼠标离开
		lis[i].addEventListener('mouseleave',function(){
			for (let j = 0; j < lis.length; j++) {
				lis[j].style.width = '240px'
			}
		})
		
	}
	


</script>

</html>