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 网页水印(非图片水印)实现代码
Mar 01 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 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使用DES进行加密与解密的方法详解
2013/06/06 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
Mootools 1.2教程 类(一)
2009/09/15 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
python计算圆周率pi的方法
2015/07/11 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
python 日志 logging模块详细解析
2020/03/31 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
Python reques接口测试框架实现代码
2020/07/28 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
css3学习心得分享
2013/08/19 HTML / CSS
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
测试工程师职业规划书
2014/02/06 职场文书
委托公证书
2014/04/08 职场文书
2014年纠风工作总结
2014/12/08 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
教师病假条范文
2015/08/17 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
一行Python命令实现批量加水印
2022/04/07 Python