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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
Js中sort()方法的用法
Nov 04 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
微信小程序排坑指南详解
May 23 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 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超级全局变量数组小结
2012/10/04 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
Python读写unicode文件的方法
2015/07/10 Python
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
Python中的Django基本命令实例详解
2018/07/15 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
Python实现粒子群算法的示例
2021/02/14 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
总经理司机职责
2014/02/02 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
Vue3中的Refs和Ref详情
2021/11/11 Vue.js
python程序的组织结构详解
2021/12/06 Python
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL