jQuery实现鼠标移入切换图片
| 初始效果： | 鼠标移入效果： |
|
|
首先添加jQuery库，我这边直接引用百度CDN地址
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
写一个jQuery载入事件
$(function(){});//因为HTML文档是由浏览器从上到下依次载入的，载入事件能避免JavaScript代码放在太后面而没效果
载入事件里面写鼠标移入<li>标签调用的方法
$('#left>li,#right>li').mouseenter(function(){});//#left>li选择器是获取左边的<li>标签，同理#right>li获取的是右边的<li>标签，mouseenter是鼠标移入被选元素触发的事件
获取当前被选元素的索引
var i=$(this).index();//index() 方法返回指定元素相对于其他指定元素的 index 位置。
因为右边图片索引值需要加上左边图片的数量才能正确显示所有需要加个判断是左边元素被选还是右边
if($(this).parent().attr("id")=="right"){
i+=4;
}if($(this).parent().attr("id")=="right"){
i+=4;
}//当前元素的父元素id是为右边无序列表id的话索引值加4,parent() 方法返回被选元素的直接父元素,attr() 方法设置或返回被选元素的属性和值
在中间显示对应的图片
$("#center>li:not()").hide().eq(i).show();//因为所有的图片都加在了中间无序列表里里，所有需要先隐藏全部图片后显示需要的图片,:not(selector)去除所有与给定选择器匹配的元素，hide() 方法隐藏被选元素,:eq(index) 选取索引等于index 的元素，索引从0开始,show() 方法显示隐藏的被选元素。
整个jQuery代码
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function() {
$('#left>li,#right>li').mouseenter(function() {
var i = $(this).index(); //index() 方法返回指定元素相对于其他指定元素的 index 位置。
if($(this).parent().attr("id")=="right"){
i+=4;
}//当前元素的父元素id是为右边无序列表id的话索引值加4,parent() 方法返回被选元素的直接父元素,attr() 方法设置或返回被选元素的属性和值
$("#center>li:not()").hide().eq(i).show(); //因为所有的图片都加在了中间无序列表里里，所有需要先隐藏全部图片后显示需要的图片,:not(selector)去除所有与给定选择器匹配的元素，hide() 方法隐藏被选元素,:eq(index) 选取索引等于index 的元素，索引从0开始,show() 方法显示隐藏的被选元素。
});//#left>li选择器是获取左边的<li>标签，同理#right>li获取的是右边的<li>标签，mouseenter是鼠标移入被选元素触发的事件
}); //因为HTML文档是由浏览器从上到下依次载入的，载入事件能避免JavaScript代码放在太后面而没效果
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>博客园（https://www.cnblogs.com）</title>
<link rel="stylesheet" href="css/good2.0.css">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function() {
$('#left>li,#right>li').mouseenter(function() {
var i = $(this).index(); //index() 方法返回指定元素相对于其他指定元素的 index 位置。
if($(this).parent().attr("id")=="right"){
i+=4;
}//当前元素的父元素id是为右边无序列表id的话索引值加4,parent() 方法返回被选元素的直接父元素,attr() 方法设置或返回被选元素的属性和值
$("#center>li:not()").hide().eq(i).show(); //因为所有的图片都加在了中间无序列表里里，所有需要先隐藏全部图片后显示需要的图片,:not(selector)去除所有与给定选择器匹配的元素，hide() 方法隐藏被选元素,:eq(index) 选取索引等于index 的元素，索引从0开始,show() 方法显示隐藏的被选元素。
});//#left>li选择器是获取左边的<li>标签，同理#right>li获取的是右边的<li>标签，mouseenter是鼠标移入被选元素触发的事件
}); //因为HTML文档是由浏览器从上到下依次载入的，载入事件能避免JavaScript代码放在太后面而没效果
</script>
</head>
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
<ul id="center">
<li><a href="#"><img src="img/雪地靴.jpg"/></a></li>
<li><a href="#"><img src="img/冬裙.jpg"/></a></li>
<li><a href="#"><img src="img/呢大衣.jpg"/></a></li>
<li><a href="#"><img src="img/牛仔裤.jpg"/></a></li>
<li><a href="#"><img src="img/登山鞋.jpg"/></a></li>
<li><a href="#"><img src="img/皮带.jpg"/></a></li>
<li><a href="#"><img src="img/男毛衣.jpg"/></a></li>
<li><a href="#"><img src="img/男棉服.jpg"/></a></li>
</ul>
<ul id="right">
<li><a href="#">登山鞋</a></li>
<li><a href="#">皮带</a></li>
<li><a href="#">男毛衣</a></li>
<li><a href="#">男棉服</a></li>
</ul>
</div>
</body>
</html>
HTML源码
* {
margin:;
padding:;
font-size: 12px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
width: 218px;
height: 108px;
margin: 100px auto 0;
border: 1px solid pink;
overflow: hidden;
}
#left, #center, #right {
float: left;
}
#left li, #right li {
background: url(../img/lili.jpg) repeat-x;
}
#left li a, #right li a {
display: block;
width: 48px;
height: 27px;
border-bottom: 1px solid pink;
line-height: 27px;
text-align: center;
color: black;
}
#left li a:hover, #right li a:hover {
color: #fff;
background-image: url(../img/abg.gif);
}
#center {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
img {
width: 120px;
height: 108px;
}
CSS
jQuery实现鼠标移入切换图片的更多相关文章
- 用jQuery实现鼠标移动切换图片动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS3鼠标移入移出图片生成随机动画
今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...
- 原生JS—实现图片循环切换及监测鼠标滚动切换图片
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...
- CSS实现鼠标移入时图片的放大效果以及缓慢过渡
transform:scale()可以实现按比例放大或者缩小功能. transition可以设置动画执行的时间,实现缓慢或者快速的执行动画,效果图如下: 源码: <!DOCTYPE html&g ...
- jquery实现鼠标移入移除背景图片切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【方法】jQuery无插件实现 鼠标拖动切换图片/内容 功能
前言 我就想随便叨逼叨几句,爱看就看几句,不爱看就直接跳过看正文就好啦~ 这个方法是仿写页面时我自己研究出来,可能有比我更简单的方法. 但我不管,因为我没查我不知道,我就觉得我的最好啦,耶耶耶~ 效果 ...
- WPF之鼠标滑动切换图片
在网上找了一会儿也没找到我想要的效果,还是自己动手,丰衣足食吧. 需求:当前面板中只显示一张图片,图片栏的下部有用来显示当前图片处于图片队列中的位置的圆球,并且点击下部栏内的圆球可以快速切换,附动画缓 ...
- Javascript和jquery事件-鼠标移入移出事件
javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...
- jQuery实现鼠标滑过图片列表加遮罩层
这个例子实现的功能是:有一列图片列表,鼠标滑过时,将有遮罩层的另一张图盖在该图片的上方,实现鼠标hover的效果. 一.HTML代码: <div class="home-content ...
随机推荐
- web前端知识day01_HTML
一.HTML入门案例(静夜思) 1.概述 HTML:Hyper Text Markup Language 超文本标记语言超文本:比普通文本功能强大,能实现不同样式(比如加粗,居中,斜体)标记语言:使用 ...
- AD复制问题汇总
1:文件复制服务NtFrs 13568报错的解决方法 解决方法: 建议不要按照日志的提示进行操作,正确的操作应该是 出现这个问题的原因,是由于在硬件的损坏,导致服务器未正确处理NTFS USN 日志. ...
- row_number over( partition by xx)
在原始表中 新加一个临时列 去重, 排序 比多次join性能提高很多 http://www.mysqltutorial.org/mysql-window-functions/mysql-row_num ...
- the Uneducated are|anymore|that| so as to |die from|die of|
定冠词加上某些形容词可以泛指一类人,谓语动词一般用复数形式,the uneducated泛指未受过教育的人, the Uneducated are more to be pitied than bla ...
- win10安装3DMAX失败，怎么强力卸载删除注册表并重新安装
一些搞设计的朋友在win10系统下安装3DMAX失败或提示已安装,也有时候想重新安装3DMAX的时候会出现本电脑windows系统已安装3DMAX,你要是不留意直接安装3DMAX,只会安装3DMAX的 ...
- django自带数据库sqlite
python manage.py makemigrations # 记录关于models.py的所有改动,但是还没有作用的数据库文件中 python manage.py migrate # 把mode ...
- 前端自动化构建工具gulp
1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次 ...
- 序列化模块ModelSerializer上补充及ListSerializer
整体单改 路由层.模型层.序列化层不需要做修改,只需要处理视图层:views.py """ 1) 单整体改,说明前台要提供修改的数据,那么数据就需要校验,校验的数据应该在 ...
- Python3爬虫：（一）爬取拉勾网公司列表
人生苦短,我用Python 爬取原因:了解一下Python工程师在北上广等大中城市的薪资水平与入职前要求. Python3基础知识 requests,pyquery,openpyxl库的使用 爬取前的 ...
- 点击穿透bug · Jaywii
微信点击穿透Bug 问题描述:在移动端为了去除点击延迟引入了fast-click,然而在房贷计算器的开发中遇到了这样一个bug,用户点击了select之后,微信在弹出选择器之后会瞬间因为约300ms的 ...