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

最新推荐文章于 2022-04-10 16:52:52 发布
最新推荐文章于 2022-04-10 16:52:52 发布
阅读量312 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43537987/article/details/89033571
版权

先来看一下效果：
在这里插入图片描述
代码部分：
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.本人也刚刚入门若上述代码及表述有误，望看到的大佬及时指出并纠正，定虚心求教。

Ron韦斯莱
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery之鼠标滑过切换产品案例
qq_43537987的博客
04-04 472
先来看一下效果： 代码部分： html: <div id="container"> <div id="list"> <ul> <li class="red"><a href="#">国际大牌</a><span>|</span></li> <li><a ...
jQuery制作鼠标经过显示图片大图，生成图片tips效果
weixin_34407348的博客
12-06 131
 一般tips都是文字，这个可以支持图片，很漂亮： 演示       &lt;script type="text/javascript"&gt; // Load this script once the document is ready $(document).ready(function () { ...
简单的鼠标划过小图片显示大图片特效
06-11
鼠标滑过小图片时，js实现鼠标hover的提示效果，提示内容为当前小图片的大图片
jQuery实现鼠标滑过导航栏呈现不同的样式
u011927449的博客
05-27 735
素材图片 源码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html;
jQuery----Tab栏切换
weixin_48340600的博客
09-29 154
使用$("#left li")相当于把所有的li选出来，并且做了隐式迭代，成为了一个数组，原生通过querySelector选择出来的是个伪数组，只有length的属性，并没有数组的方法 另外我们可以通过$(this).index()方法获取到当前小li的索引号 $("#left li").mouseover(function() { // 2. 得到当前小li 的索引号 var index = $(this).index();
JQuery实现鼠标滑过显示导航下拉列表
10-26
综上所述，JQuery在实现鼠标滑过显示导航下拉列表的案例中，展示了其对JavaScript事件处理的简化和优化能力。通过简单的几个方法，就能快速实现复杂的交互效果。而这种效果的实现，也是现代网页设计中必不可少的元素...
jQuery带标题的鼠标滑过切换焦点图
04-07
"jQuery带标题的鼠标滑过切换焦点图"是一种利用jQuery库实现的交互式图片轮播效果，它增强了用户体验，当用户将鼠标悬停在图片上时，不仅会切换图片，还会显示相应的标题信息。 jQuery是一款轻量级、高性能的...
jquery左侧边浮动菜单鼠标滑过图标菜单滑动显示
10-31
在这个“jquery左侧边浮动菜单鼠标滑过图标菜单滑动显示”的主题中，我们将探讨如何利用jQuery实现一个功能丰富的侧边栏菜单，当用户鼠标悬停在图标上时，菜单会平滑地滑动展开。 首先，我们需要理解基本的HTML结构...
jQuery鼠标滑过图片显示详细信息
11-11
"jQuery鼠标滑过图片显示详细信息"是一个常见的交互设计，用于提升用户体验，让用户在不离开页面的情况下预览图片的详细信息。这个功能在电子商务网站、产品展示页面等场景中尤其常见。 实现这个功能，主要涉及到...
jQuery实现鼠标滑过图片显示隐藏标题效果源码.zip
最新发布
11-19
在本资源中，我们主要探讨的是如何利用jQuery库来实现一个功能：当鼠标滑过图片时，图片下方会显示隐藏的标题。这个效果在网页设计中常见于图像展示或者产品介绍，可以提升用户体验，使信息展示更加直观。下面将详细...
jQuery实现鼠标移到某个对象时弹出显示层功能
12-10
本文实例讲述了jQuery实现鼠标移到某个对象时弹出显示层功能。分享给大家供大家参考，具体如下： /** * 鼠标移上去显示层 * @param divId 显示的层ID * @returns */ $.fn.myHoverTip = function(divId) { var div = $("#" + divId); //要浮动在这个元素旁边的层 div.css("position", "absolute");//让这个层可以绝对定位 var self = $(this); //当前对象 self.hover(function() { div.css("displ
jQuery案例
qq_36460907的博客
09-14 412
淘宝服饰精品案例 思路分析: 1.核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。 2.需要得到当前小li 的索引号，就可以显示对应索引号的图片 3.jQuery 得到当前元素索引号 $(this).index() 4.中间对应的图片，可以通过 eq(index) 方法去选择 5.显示元素 show() 隐藏元素 hide() <script> $(function () { //1.鼠标经过左侧的小l.
【前端学习-19】【01】JQuery的基本使用/顶级对象$/DOM和JQuery对象的区别与转换/隐式迭代实现排他思想/新浪下拉菜单/淘宝精品/tab侧边栏/手风琴/高亮效果显示
QNANWang的博客
05-16 359
基本使用： 1.官网下载JQuery->引入JS->调用 JQuery和DOM对象的区别 两对象的相互转换 使用： 利用隐式迭代实现排他思想 案例：新浪下拉菜单 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit..
jQuery：常用API用法总结
Continue的博客
04-12 878
文章目录1. jQuery选择器1.1 基础选择器1.2 层级选择器1.3 隐式迭代1.4 筛选选择器1.5 筛选方法2. jQuery样式操作3. jQuery效果4. jQuery属性操作5. jQuery文本属性值6. jQuery元素操作7. jQuery尺寸、位置操作 1. jQuery选择器 1.1 基础选择器 原生JS 获取原生方式很多，而且情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。 $("选择器") 1.2 层级选择器 1.3 隐式迭代 遍历内部DOM元素（伪数组
jquery hover鼠标划过实现列表页文章内容部分显示隐藏及全部显示切换
11-20 2752
  测试代码   &lt;div class="hn_column"&gt; &lt;li&gt;&lt;h2&gt;&lt;a href="/plus/view.php?aid=6"&gt;Medicine University of Oxford 3&lt;/a&gt;&lt;/h2&gt;&lt;p class="text text0&q
jQuery：鼠标与div的坐标位置
HEAT
11-20 295
jQuery鼠标与div的坐标位置   情景：当鼠标离开div时3秒后删除该div 该div的class为sp     function spon_out(event){ var x=event.pageX-this.offsetLeft; var y=event.pageY-this.offsetTop; if(x &lt; 0 || x &gt; 260...
jQuery淘宝精品案例
weixin_30319153的博客
10-17 249
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding:...
【Jquery】点击列表实现对应的内容展示
qq_51630625的博客
04-10 1409
点击列表实现对应的内容展示 需求： 点击tab栏中的某个P标签，在下列展示相对应的电器 解决方法： 正确的方法！！！ // 导航栏切换并显示效果 $('.index-nav p').on('click',function () { // 对点中的按钮添加类，其兄弟删除类 $(this).addClass('nav-active').siblings('p').removeClass('nav-active') // 定义所有的block-ico va
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值