【前端】手写手风琴·教程

一颗不甘坠落的流星

已于 2024-02-19 15:20:41 修改

阅读量959

点赞数 1

分类专栏：工作随记文章标签： js 手风琴手风琴效果

于 2021-02-02 11:52:45 首次发布

本文链接：https://blog.csdn.net/qq_45677671/article/details/113528343

版权

工作随记专栏收录该内容

70 篇文章 3 订阅

订阅专栏

文章目录

效果图：

未展开时的效果
鼠标悬浮在其上的效果

在这里插入图片描述

需求分析：

在每个 li 里面设置一个图片
鼠标移出 ul ,每个 li 的宽度变成240
鼠标移入某个 li ,当前 li 的宽度变成800,其他 li 的宽度变成100

源代码：

HTML部分：

<!-- 
	1.创建一个div盒子容器
    2.div盒子里面创建ul，设置id名box
    3.ul里面li用来放置图片使用
-->
<div>
	<ul id="box">
		<li></li>
		<li></li>
	    <li></li>
	    <li></li>
	    <li></li>
	</ul>
</div>

CSS部分：

<style>
	/*  */
    *{/* 重置内外默认边距 */
        margin:0; 
        padding:0;
    }
    ul{/* 重置ul行内样式 */
        list-style: none
    }
    div{
        width: 1200px;
        height: 400px;
        margin:50px auto;	/* 上下 50px 外边距，左右自适应居中 */
        border:1px solid red;
        overflow: hidden;	/* 超出部分隐藏 */
    }
    div li {
        width: 240px;
        height: 400px;
        float: left;            
    }
    div ul {/* ul的宽度要放宽，防止掉落li */
        width: 2000px;
    }
</style>

JavaScript部分：

封装两个函数，这部分可以先不看

<script>
// 返回指定dom节点的attr样式值
function getStyle(dom,attr){
	if(window.getComputedStyle){// 是否有getComputedStyle方法
		//非IE低版
		return window.getComputedStyle(dom,null)[attr];
	}else{
		//IE低版
		return dom.currentStyle[attr];
	}
}
// 封装一个缓动的动画函数，需要时调用即可
function animate(dom,json,callback){
	/* 
        dom:要运动的节点
        json:要运动的样式名
        callback:运动完成的回调函数
    */
    clearInterval(dom.timer);//要用定时器，先清定时器
    //要运动的定时器
    dom.timer = setInterval(function(){
		var flag = true;
		//json有几个属性，就要运动几次
		for(var attr in json){
			//获取当前位置
			var current = parseInt(getStyle(dom,attr));
			// 计算速度
			var speed = json[attr] - current > 0 ? Math.ceil((json[attr]-current)/10):Math.floor((json[attr]-current)/10);
			//计算下一个位置
			var next = current + speed;
			//定位元素
			dom.style[attr] = next+'px';
			//判断是否达到目标
			if(next != json[attr]){
				flag = false;
			}
		}
		if(flag){
			clearInterval(dom.timer);
		}
	},20)// 每20毫秒
}
</script>

主要部分

<script>
	//获取 id 为 box 的 ul 标签
	var ul = document.getElementById('box');
	//获取 ul 下 li 的子元素集合
	var liArr = ul.children;
	//遍历获取到的 li 集合
	for(var i = 0; i < liArr.length; i++){
		//在每一个 li 里面放置一张图片
		liArr[i].innerHTML = "<img src=./images/"+(i+1)+".jpg>";
		//鼠标移入某个 li，当前 li 的宽度变成 800px，其他 li 的宽度变成 100px
		liArr[i].onmouseenter = function(){//设置鼠标移入事件
			// 干掉所有人，留下我一个
			for(var j = 0; j < liArr.length; j++){
				// 没动画效果的简单写法：
				liArr[j].style.width = '100px';
				/* 
				有动画效果的复杂写法：
				animate(liArr[j],{width:100})
				*/
			}
			// 没动画效果的简单写法：
			this.style.width = '800px';
			/* 
				有动画效果的复杂写法：
				animate(this,{width:800})
			*/
	}
	// 鼠标移出 ul，每个 li 的宽度变成 240px
	ul.onmouseleave = function(){
		for(var j = 0; j < liArr.length; j++){
			// 没动画效果的简单写法：
			liArr[j].style.width = '240px';
			/* 
				有动画效果的复杂写法：
				animate(liArr[j],{width:240})
			*/
		}
	}
	}
</script>

总代码：

<!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{/* 重置ul行内样式 */
        list-style: none
    }
    div{
        width: 1200px;
        height: 400px;
        margin:50px auto;	/* 上下 50px 外边距，左右自适应居中 */
        border:1px solid red;
        overflow: hidden;	/* 超出部分隐藏 */
    }
    div li {
        width: 240px;
        height: 400px;
        float: left;            
    }
    div ul {/* ul的宽度要放宽，防止掉落li */
        width: 2000px;
    }
</style>
</head>
<body>
	<!-- 
	1.创建一个div盒子容器
    2.div盒子里面创建ul，设置id名box
    3.ul里面li用来放置图片使用
	-->
	<div>
		<ul id="box">
		   <li></li>
		   <li></li>
		   <li></li>
	 	   <li></li>
	 	   <li></li>
		</ul>
	</div>
<script>
	//获取 id 为 box 的 ul 标签
	var ul = document.getElementById('box');
	//获取 ul 下 li 的子元素集合
	var liArr = ul.children;
	//遍历获取到的 li 集合
	for(var i = 0; i < liArr.length; i++){
		//在每一个 li 里面放置一张图片
		liArr[i].innerHTML = "<img src=./images/"+(i+1)+".jpg>";
		//鼠标移入某个 li，当前 li 的宽度变成 800px，其他 li 的宽度变成 100px
		liArr[i].onmouseenter = function(){//设置鼠标移入事件
			// 干掉所有人，留下我一个
			for(var j = 0; j < liArr.length; j++){
				// 没动画效果的简单写法：
				liArr[j].style.width = '100px';
				/* 
				有动画效果的复杂写法：
				animate(liArr[j],{width:100})
				*/
			}
			// 没动画效果的简单写法：
			this.style.width = '800px';
			/* 
				有动画效果的复杂写法：
				animate(this,{width:800})
			*/
	}
	// 鼠标移出 ul，每个 li 的宽度变成 240px
	ul.onmouseleave = function(){
		for(var j = 0; j < liArr.length; j++){
			// 没动画效果的简单写法：
			liArr[j].style.width = '240px';
			/* 
				有动画效果的复杂写法：
				animate(liArr[j],{width:240})
			*/
		}
	}
	}
// 返回指定dom节点的attr样式值
function getStyle(dom,attr){
	if(window.getComputedStyle){// 是否有getComputedStyle方法
		//非IE低版
		return window.getComputedStyle(dom,null)[attr];
	}else{
		//IE低版
		return dom.currentStyle[attr];
	}
}
// 封装一个缓动的动画函数，需要时调用即可
function animate(dom,json,callback){
	/* 
        dom:要运动的节点
        json:要运动的样式名
        callback:运动完成的回调函数
    */
    clearInterval(dom.timer);//要用定时器，先清定时器
    //要运动的定时器
    dom.timer = setInterval(function(){
		var flag = true;
		//json有几个属性，就要运动几次
		for(var attr in json){
			//获取当前位置
			var current = parseInt(getStyle(dom,attr));
			// 计算速度
			var speed = json[attr] - current > 0 ? Math.ceil((json[attr]-current)/10):Math.floor((json[attr]-current)/10);
			//计算下一个位置
			var next = current + speed;
			//定位元素
			dom.style[attr] = next+'px';
			//判断是否达到目标
			if(next != json[attr]){
				flag = false;
			}
		}
		if(flag){
			clearInterval(dom.timer);
		}
	},20)// 每20毫秒
}
</script>
</body>
</html>