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 相关文章推荐
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
jquery.cookie.js使用指南
Jan 05 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
JS将unicode码转中文方法
May 08 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
在nuxt中使用路由重定向的实例
Nov 06 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
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
js 替换
2008/02/19 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
jquery编写日期选择器
2017/03/16 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
Python牛刀小试密码爆破
2011/02/03 Python
Python的ORM框架SQLObject入门实例
2014/04/28 Python
Python中endswith()函数的基本使用
2015/04/07 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python实现学生成绩管理系统
2020/04/05 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
怎么写好自荐信
2013/10/30 职场文书
学院领导推荐信
2013/10/30 职场文书
集体备课反思
2014/02/12 职场文书
赡养老人协议书
2014/04/21 职场文书
财务部岗位职责
2015/02/03 职场文书
500字小学生检讨书
2015/02/19 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
导游词之青岛崂山
2019/12/27 职场文书