您的位置: 首页  >  文章  >  jQuery小案例之鼠标滑过显示对应的精品推荐

jQuery小案例之鼠标滑过显示对应的精品推荐

分类: 文章 • 2025-02-28 22:53:11

先来看一下效果：
jQuery小案例之鼠标滑过显示对应的精品推荐
代码部分：
html:
分为左中右三部分，三部分均由列表实现。

<div id="container">
		<div id="left">
		<ul id="ul">
			<li><a href="#">女鞋</a></li>
			<li><a href="#">女鞋</a></li>
			 //已两个为例，其他省略
		</ul>
	</div>
	<div id="center">
		<ul id="uu">
			<li><a href="#"><img src="images/女靴.jpg" width="240" height="240"/></a></li>
	        <li><a href="#"><img src="images/雪地靴.jpg" width="240" height="240"/></a></li>  
		</ul>
	</div>
	<div id="right">
		<ul id="ul">
			<li><a href="#">男包</a></li>
			<li><a href="#">男包</a></li>
		</ul>
	</div>
	</div>

css部分：

<style>
		* {
			margin:0;
			padding: 0;
		}
		ul {
			list-style: none;
		}
		a {
			text-decoration: none;
			color: #000;
		}
		#container {
			width: 400px;
			height: 300px;
			margin: 100px auto;
		}
		#left, #center, #right {
			float: left;
			width: 50px;
			height: 240px;
			border:1px solid red;
		}
		#center {
			width: 240px;
		}
		#left li, #right li{
			border:1px solid red;
			height: 22px;
			text-align: center;
			line-height: 22px;
		}
		#left li:hover, #right li:hover {
			background: red;
		}
		#center {
			position: relative;
		}
		#center li{
			position: absolute;
			display: none;
		}
		#center li:first-child{
			display: block;
		}
	</style>

jQuery部分：

<script src="jquery-1.12.2.js"></script>
	<script>
		$(function(){
			$("#left li").mouseover(function(){
				var index = $(this).index();
				console.log(index);
				$("#center li:eq(" + index + ")").siblings("li").hide();
				$("#center li:eq(" + index + ")").show();
			});
			$("#right li").mouseover(function(){
				var index = $(this).index() + 10;
				console.log(index);
				$("#center li:eq(" + index + ")").siblings("li").hide();
				$("#center li:eq(" + index + ")").show();
			});
		})
	</script>

全部代码->方便复制粘贴

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin:0;
			padding: 0;
		}
		ul {
			list-style: none;
		}
		a {
			text-decoration: none;
			color: #000;
		}
		#container {
			width: 400px;
			height: 300px;
			margin: 100px auto;
		}
		#left, #center, #right {
			float: left;
			width: 50px;
			height: 240px;
			border:1px solid red;
		}
		#center {
			width: 240px;
		}
		#left li, #right li{
			border:1px solid red;
			height: 22px;
			text-align: center;
			line-height: 22px;
		}
		#left li:hover, #right li:hover {
			background: red;
		}
		#center {
			position: relative;
		}
		#center li{
			position: absolute;
			display: none;
		}
		#center li:first-child{
			display: block;
		}
	</style>
	<script src="jquery-1.12.2.js"></script>
	<script>
		$(function(){
			$("#left li").mouseover(function(){
				var index = $(this).index();
				console.log(index);
				$("#center li:eq(" + index + ")").siblings("li").hide();
				$("#center li:eq(" + index + ")").show();
			});
			$("#right li").mouseover(function(){
				var index = $(this).index() + 10;
				console.log(index);
				$("#center li:eq(" + index + ")").siblings("li").hide();
				$("#center li:eq(" + index + ")").show();
			});
		})
	</script>
</head>
<body>
	<div id="container">
		<div id="left">
		<ul id="ul">
			<li><a href="#">女鞋</a></li>
			<li><a href="#">女鞋</a></li>
			<li><a href="#">女鞋</a></li>
			<li><a href="#">女鞋</a></li>
			<li><a href="#">女鞋</a></li>
			<li><a href="#">女鞋</a></li>
			<li><a href="#">女鞋</a></li>
			<li><a href="#">女鞋</a></li>
			<li><a href="#">女鞋</a></li>
			<li><a href="#">女鞋</a></li>
		</ul>
	</div>
	<div id="center">
		<ul id="uu">
			<li><a href="#"><img src="images/女靴.jpg" width="240" height="240"/></a></li>
	        <li><a href="#"><img src="images/雪地靴.jpg" width="240" height="240"/></a></li>
	        <li><a href="#"><img src="images/冬裙.jpg" width="240" height="240"/></a></li>
	        <li><a href="#"><img src="images/呢大衣.jpg" width="240" height="240"/></a></li>
	        <li><a href="#"><img src="images/毛衣.jpg" width="240" height="240"/></a></li>
	        <li><a href="#"><img src="images/棉服.jpg" width="240" height="240"/></a></li>
	        <li><a href="#"><img src="images/女裤.jpg" width="240" height="240"/></a></li>
	        <li><a href="#"><img src="images/羽绒服.jpg" width="240" height="240"/></a></li>
	        <li><a href="#"><img src="images/牛仔裤.jpg" width="240" height="240"/></a></li>
	        <li><a href="#"><img src="images/女包.jpg" width="240" height="240"/></a></li>
	        <li><a href="#"><img src="images/男包.jpg" width="240" height="240"/></a></li>
	        <li><a href="#"><img src="images/登山鞋.jpg" width="240" height="240"/></a></li>
	        <li><a href="#"><img src="images/皮带.jpg" width="240" height="240"/></a></li>
	        <li><a href="#"><img src="images/围巾.jpg" width="240" height="240"/></a></li>
	        <li><a href="#"><img src="images/皮衣.jpg" width="240" height="240"/></a></li>
	        <li><a href="#"><img src="images/男毛衣.jpg" width="240" height="240"/></a></li>
	        <li><a href="#"><img src="images/男棉服.jpg" width="240" height="240"/></a></li>
	        <li><a href="#"><img src="images/男靴.jpg" width="240" height="240"/></a></li>

			<li><a href="#"><img src="images/女包.jpg"width="240px" height="240px" alt=""></a></li>
			<li><a href="#"><img src="images/女包.jpg"width="240px" height="240px" alt=""></a></li>
		</ul>
	</div>
	<div id="right">
		<ul id="ul">
			<li><a href="#">男包</a></li>
			<li><a href="#">男包</a></li>
			<li><a href="#">男包</a></li>
			<li><a href="#">男包</a></li>
			<li><a href="#">男包</a></li>
			<li><a href="#">男包</a></li>
			<li><a href="#">男包</a></li>
			<li><a href="#">男包</a></li>
			<li><a href="#">男包</a></li>
			<li><a href="#">男包</a></li>
		</ul>
	</div>
	</div>
</body>
</html>

总结
1.获取索引的方法-> index();
2.需要记录滑过的索引且注意左右两侧的索引不一样，右侧的索引在当前案例中药加10。
3.让照片显示和隐藏使用方法show(),hide()。
4.本案例用到索引选择器eq();括号中参数为数字，出eq()还有gt(),lt(),前者指给不包括当前元素后面的元素添加相应的样式，后者为给不包括当前元素前面的元素添加相应的样式。
5.拼接字符串串时注意在适当位置加引号，如当前案例中的：

$("#center li:eq(" + index + ")").show();

6.本人也刚刚入门若上述代码及表述有误，望看到的大佬及时指出并纠正，定虚心求教。

相关推荐