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中document对象的一些重要属性
Mar 06 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
VueJS 取得 URL 参数值的方法
Jul 19 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 Javascript
微信小程序实现点击导航条切换页面
Nov 19 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
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 正则匹配函数体
2009/08/25 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
Python中文字符串截取问题
2015/06/15 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
探究python中open函数的使用
2016/03/01 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
Python之变量类型和if判断方式
2020/05/05 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
护士节活动总结
2014/08/29 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
小学优秀班主任材料
2014/12/17 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
Python集合set()使用的方法详解
2022/03/18 Python
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS