jQuery实现菜单感应鼠标滑动动画效果的方法


Posted in Javascript onFebruary 28, 2015

本文实例讲述了jQuery实现菜单感应鼠标滑动动画效果的方法。分享给大家供大家参考。具体分析如下:

此代码测试环境为IE9 以及GG、FF浏览器,IE8及以下浏览器可能不支持,希望理解。

这款JS鼠标滑动效果使用jQuery实现简单动画的方法,而且也惊喜的发现,jquery有更好的书写方法,可以连写,在animate方法前加上stop方法就可实现鼠标移出后,不再执行滑动效果。

<!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=utf-8" />

<title>非常不错的jQuery鼠标滑动效果</title>

<script src="js/jquery.min.js" type="text/javascript"></script>

<style>

body{font-size:12px;font-family:Tahoma,Arial,Verdana;color:#fff; background:#000; width:100%; height:100%;}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td ,i{padding:0;margin:0}

fieldset,img {border:0}

.clear{ clear:both;}

address,caption,cite,code,dfn,em,th,var {font-weight:normal;font-style:normal}

ol,ul {list-style:none}

caption,th {text-align:left}

h1,h2,h3,h4,h5,h6 {font-size:100%}

abbr,acronym,img {border:0}

button,input,select,textarea{font-size:100%;}

input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}

table {border-collapse:collapse;border-spacing:0;}

a{text-decoration:none;}

a:hover {text-decoration:underline;}

.clearfix:after {visibility: hidden;display: block;font-size: 0;content: ".";clear:both;}

.all ul{ width:100%; text-align:center;}

.all ul li{ width:100%; height:40px; line-height:40px; border-bottom:1px dashed #990066; cursor:pointer;}

</style>

</head>

<body>

<div class="all">

<ul>

<li>第一项</li>

<li>第二项</li>

<li>第三项</li>

</ul>

</div>

<script type="text/javascript">

$(document).ready(function(){

$('.all ul li').mouseover(function(){

$(this).animate({"height":"70px","line-height":"70px"},100)

}).mouseleave(function(){

$(this).stop().animate({"height":"40px","line-height":"40px"},100)

});

})

</script>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
有关js的变量作用域和this指针的讨论
Dec 16 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
vue-router 权限控制的示例代码
Sep 21 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 #Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 #Javascript
js获取当前日期前七天的方法
Feb 28 #Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 #Javascript
使用命令对象代替switch语句的写法示例
Feb 28 #Javascript
Underscore.js常用方法总结
Feb 28 #Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 #Javascript
You might like
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
php表单处理操作
2017/11/16 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
一个javascript参数的小问题
2008/03/02 Javascript
Ext 表单布局实例代码
2009/04/30 Javascript
brook javascript框架介绍
2011/10/10 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
用Python设计一个经典小游戏
2017/05/15 Python
python 调试冷知识(小结)
2019/11/11 Python
Python各种扩展名区别点整理
2020/02/27 Python
python实现从ftp服务器下载文件
2020/03/03 Python
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
应聘收银员个人的求职信
2013/11/30 职场文书
老师自我鉴定范文
2013/12/25 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
新手初学Java List 接口
2021/07/07 Java/Android