jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
更新时间：2015年10月28日 09:29:05 作者：企鹅
这篇文章主要介绍了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果,涉及jQuery鼠标事件的响应及链式操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果。分享给大家供大家参考，具体如下：
这里演示jQuery实现鼠标移动到链接上，滑动展开/隐藏图片效果，鼠标放在“上一页”“下一页”上，立即浮现出所对应的图片，有点提前预览的味道，让用户知道下一页或下一页的大致内容，很好的提升了用户体验。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-mouse-over-link-pic-show-codes/
具体代码如下：
<!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; charset=gb2312" />
<title>鼠标移动链接上，滑动展开/隐藏图片效果</title>
<script language="javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
$(".list>li:has(div)").hover(function(){
$(this).children('a').addClass('red').end().find('div').slideDown("fast");},
function(){
$(this).children('a').removeClass('red').end().find('div').slideUp("fast");
});
});
</script>
<style>
*{margin:0;padding:0}
body{background:#F8F3ED}
li{list-style:none}
.list{height:40px;background:#fff;padding-left:100px;}
.list li{float:left;position:relative;}
.list li a{float:left;width:100px;height:40px;line-height:40px; text-align:center;color:#B7B7B7;text-decoration:none; font-family:"微软雅黑";}
.list li a:hover{background:#99C228;color:#FFF;}
.list .box{position:absolute;top:40px;left:0;display:none;width:240px;height:170px;background:#99C228;color:#FFF;}
.list .box img{width:220px;height:150px;margin:10px;}
.list li a:hover,.red{background:#99C228!important;color:#FFF!important;}
</style>
</head>
<body>
<ul class="list">
<li><a href="javascript:;">上一页</a>
<div class="box"><img src="images/wall_s9.jpg" /></div>
</li>
<li><a href="javascript:;">下一页</a>
<div class="box"><img src="images/wall_s7.jpg" /></div>
</li>
</ul>
</body>
</html>
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
文章从JSON和JSONP区别开始讲起，用实例来对比他们之间的不同之处，然后详细讲解了jQuery中的ajax jsonp的使用并给出了示例及详细参数说明。这里推荐给大家，希望对小伙伴能有所帮助2014-11-11
本文给大家详细讲解的是如何利用jquery.more.js实现点击加载更多后在本页面内下面加载数据，十分的实用，有需要的小伙伴可以参考下。2015-05-05
这篇文章主要介绍了Jquery 动态循环输出表格具体方法，有需要的朋友可以参考一下2013-11-11
jQuery实现的表头固定效果实例【附完整demo源码下载】
这篇文章主要介绍了jQuery实现的表头固定效果,结合完整实例形式分析了jQuery基于插件实现的表头固定功能与用法,非常简单实用,需要的朋友可以参考下2016-08-08
jquery为我们提供了操作数组和对象的工具函数，方便和简化了我们对它们的操作。今天我们就进入jQuery的工具函数的复习。2015-06-06
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
JQuery在IE8兼容性视图模式下操作Select的Options的Bug在本文进行重现并给出详细的解决方法，感兴趣的朋友可以参考下哈，希望对你有所帮助2013-04-04
这里所说的浮动工具栏就是大家平时看到的社交网络分享按钮栏那样的效果,可以做成浮动效果且能上下移动,这里我们就来看一个使用jQuery制作页面工具边栏的实例分享.2016-05-05
这篇文章介绍了jQuery操作HTML代码的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要介绍了jquery实现鼠标滑过显示二级下拉菜单效果,通过jquery操作鼠标事件及页面样式动态变换实现该功能,非常具有实用价值,需要的朋友可以参考下2015-08-08
为了保证前台页面的整洁，我们习惯性地将CSS放入一个单独的.CSS文件中以便调用，而JS也同样可以放到单独的JS文件中去，并且页面上的事件如onclick，onmouseover也可以分离出来，现在网上比较流行JQuery2008-11-11
最新评论