文章目录

效果图：

  • 未展开时的效果
    在这里插入图片描述
  • 鼠标悬浮在其上的效果

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

需求分析：

  1. 在每个 li 里面设置一个图片
  2. 鼠标移出 ul ,每个 li 的宽度变成240
  3. 鼠标移入某个 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部分：
  1. 封装两个函数，这部分可以先不看
<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>
  1. 主要部分
<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>

所用图片：

在这里插入图片描述

由于你们没有图片，直接复制代码，展示不出效果，大家可以自己找几张图片来代替，稍微修改下即可，只要能看得懂代码，修改起来莫得问题啦

Logo
技术共进，成长同行——讯飞AI开发者社区

技术共进，成长同行——讯飞AI开发者社区

更多推荐

提示工程架构师实战手册：智能医疗远程诊断系统的提示词设计与性能调优

智能医疗远程诊断系统旨在通过AI技术打破地域限制，让偏远地区患者也能获得三甲医院级别的诊断支持。医疗数据的复杂性：病历文本、影像数据（CT/MRI）、波形数据（ECG/EEG）、实验室指标等多模态数据混杂，AI难以自动提取关键信息；临床推理的严谨性：医疗诊断需遵循"症状→鉴别诊断→证据验证→结论"的逻辑链，AI易因"跳跃式推理"导致误诊；伦理与安全风险：误诊可能危及生命，需确保AI结论可解释、可追

avatar 讯飞AI开发者社区
cover

上位机知识篇---AI术语总结

avatar 讯飞AI开发者社区
cover

人工智能专业毕业设计选题灵感集锦：实用研究方向

avatar 讯飞AI开发者社区