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="data:images/女靴.jpg" width="240" height="240"/></a></li><li><a href="#"><img src="data: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="data:images/女靴.jpg" width="240" height="240"/></a></li><li><a href="#"><img src="data:images/雪地靴.jpg" width="240" height="240"/></a></li><li><a href="#"><img src="data:images/冬裙.jpg" width="240" height="240"/></a></li><li><a href="#"><img src="data:images/呢大衣.jpg" width="240" height="240"/></a></li><li><a href="#"><img src="data:images/毛衣.jpg" width="240" height="240"/></a></li><li><a href="#"><img src="data:images/棉服.jpg" width="240" height="240"/></a></li><li><a href="#"><img src="data:images/女裤.jpg" width="240" height="240"/></a></li><li><a href="#"><img src="data:images/羽绒服.jpg" width="240" height="240"/></a></li><li><a href="#"><img src="data:images/牛仔裤.jpg" width="240" height="240"/></a></li><li><a href="#"><img src="data:images/女包.jpg" width="240" height="240"/></a></li><li><a href="#"><img src="data:images/男包.jpg" width="240" height="240"/></a></li><li><a href="#"><img src="data:images/登山鞋.jpg" width="240" height="240"/></a></li><li><a href="#"><img src="data:images/皮带.jpg" width="240" height="240"/></a></li><li><a href="#"><img src="data:images/围巾.jpg" width="240" height="240"/></a></li><li><a href="#"><img src="data:images/皮衣.jpg" width="240" height="240"/></a></li><li><a href="#"><img src="data:images/男毛衣.jpg" width="240" height="240"/></a></li><li><a href="#"><img src="data:images/男棉服.jpg" width="240" height="240"/></a></li><li><a href="#"><img src="data:images/男靴.jpg" width="240" height="240"/></a></li><li><a href="#"><img src="data:images/女包.jpg"width="240px" height="240px" alt=""></a></li><li><a href="#"><img src="data: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.本人也刚刚入门若上述代码及表述有误，望看到的大佬及时指出并纠正，定虚心求教。

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

鼠标滑过时显示图片内容隐藏和鼠标滑过图片隐藏内容显示的两种小方法
1.鼠标滑过时显示图片,内容隐藏,下面以一个小日历的做法展示 <div class="date7"> <a href=""><di ...
jquery鼠标移入文字提示_jquery实现鼠标滑过显示提示框的方法
本文实例讲述了jquery实现鼠标滑过显示提示框的方法.分享给大家供大家参考.具体如下: 一.jquery鼠标滑过显示提示框实例 1.效果图 2.实现代码 ( 需要自行添加 jquery.js.按钮 ...
echarts 柱状图鼠标滑过显示图标+数字每三位打千分号+单位
echarts 柱状图鼠标悬浮显示图标+数字每三位打千分号+单位千分号+单位全部代码示例代码柱状图鼠标滑过显示单位千分号+单位 1.图标:params[i].marker 2.数字每三位 ...
css实现鼠标禁用（鼠标滑过显示红色禁止符号）
css实现鼠标禁用(鼠标滑过显示红色禁止符号) 创作背景 css鼠标禁用创作背景从本文开始,将会用三篇文章来一步一步实现 vue+antd+ts实战后台管理系统中table表格的不可控操作.中间会 ...
html5鼠标滑过边框内外发亮,JS实现鼠标滑过显示边框的菜单效果
本文实例讲述了JS实现鼠标滑过显示边框的菜单效果.分享给大家供大家参考,具体如下: JS鼠标滑过显示边框菜单 .menulines{ border:1px solid white; } .menuli ...
[JQuery代码]超酷鼠标滑过背景高亮效果
1.效果及功能说明鼠标滑过悬停特效,div css制作产品列表图片布局通过鼠标滑过产品图片背景高亮闪烁显示,产品标题滑动显示或隐藏 2.实现原理首先定义好一个重复实现效果的方法,然后定义光带出现速 ...
鼠标滑过显示图片大图效果
描写叙述: 当用户将鼠标放到图片上时.显示图片的大图. 效果图: 说明: 用到了mouseover.mouseout.mousemove三个事件.分别表示鼠标滑过图片.鼠标移除图片.鼠标在图片上移动 ...
vue 鼠标滑过显示文字增加高度
需求:文字内容太长,要求鼠标滑过展示全部内容,并且高度变高鼠标放上效果代码: 前端: <li id="a" v-for="item,index in menuD ...
Vue超出文本框显示省略号，鼠标滑入显示全部
在开发过程中经常会遇到空间太小文字展示不全的问题,对于一些数据可能影响不大,但对于一些数据描述开头都是一样结尾不同的可能就没办法区分了.解决办法:通过鼠标划入展示全部文字的效果用来解决. 一.通过 : ...

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

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

最新文章

热门文章