jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果


Posted in Javascript onOctober 28, 2015

本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果。分享给大家供大家参考,具体如下:

这里演示jQuery实现鼠标移动到链接上,滑动展开/隐藏图片效果,鼠标放在“上一页”“下一页”上,立即浮现出所对应的图片,有点提前预览的味道,让用户知道下一页或下一页的大致内容,很好的提升了用户体验。

运行效果截图如下:

jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
微信JS接口大全
Aug 25 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
老生常谈js中的MVC
Jul 25 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 #Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 #Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 #Javascript
jquery实现的V字形显示效果代码
Oct 27 #Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 #Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 #Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 #Javascript
You might like
PHP 模板高级篇总结
2006/12/21 PHP
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
vue实现购物车小案例
2019/09/27 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
python通过http下载文件的方法详解
2019/07/26 Python
Python Subprocess模块原理及实例
2019/08/26 Python
python实现统计代码行数的小工具
2019/09/19 Python
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
工商管理应届生求职信
2013/10/07 职场文书
实习护士自我鉴定
2013/10/13 职场文书
生物制药毕业生自荐信
2013/10/16 职场文书
护理专业的自荐信
2013/10/22 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
百日安全生产活动总结
2014/07/05 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript
Mysql如何查看是否使用到索引
2022/12/24 MySQL