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 相关文章推荐
javascript 操作Word和Excel的实现代码
Oct 26 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 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源代码
2006/10/09 PHP
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
Python实现的购物车功能示例
2018/02/11 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
Python生成器常见问题及解决方案
2020/03/21 Python
python学生管理系统的实现
2020/04/05 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
毕业生的求职信范文分享
2013/12/04 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
青春雷锋观后感
2015/06/10 职场文书
高一作文之暖冬
2019/11/09 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL