利用JQuery动画制作滑动菜单项效果实现步骤及代码

效果：

点击第二个菜单项后出现一个向上滑动的动画，控制margin-top底部另一个div中的文字

上移从而替换掉原有的文字。

原理其实不难无非就是css的控制加之jquery的代码

对docemnt中所有li绑定一个hover事件，事件中根据鼠标的状态（无非是移入与移除），

使用animate的动画方式使原有的div向上移70px，移出时再将页面效果变回原有的样子。

代码如下：


代码如下:

$(function () {
var webNav = {
val: {
target: 0
},

init: function () {
$(".gnb ul li").on("hover", webNav.hover);

},

hover: function (e) {
if ($(this).index() == webNav.val.target) { return };
if (e.type == "mouseenter") {
$(this).find("a>p").stop(true, true).animate({ "margin-top": "-70px" }, 300);
} else if (e.type == "mouseleave") {
$(this).find("a>p").stop(true, true).animate({ "margin-top": "0px" }, 300);
}
}
};
webNav.init();

});

赞 (0)

相关推荐

  • 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/xhtm

  • jQuery实现背景滑动菜单

    话不多说,直接附上源码,仅供大家参考 <div class="menu"> <ul id="menu"> <li><a href="#">JavaScript</a></li> <li value="1"><a href="#">Graphic Design</a></li> <li

  • jquery实现仿Flash的横向滑动菜单效果代码

    jquery实现仿Flash的横向滑动菜单效果代码

    本文实例讲述了jquery实现仿Flash的横向滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一个仿Flash的jquery滑动菜单,横向,延时效果明显,如果觉得延时太长的话,自己可以修改参数,通过这个菜单主要是想向大家掌握一些jQuery生成动画的技巧,同时这也是jquery强大功能的体现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-flash-style-move-menu-codes/ 具体代码如下: <!

  • jQuery实现可用于博客的动态滑动菜单完整实例

    jQuery实现可用于博客的动态滑动菜单完整实例

    本文实例讲述了jQuery实现可用于博客的动态滑动菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery1.3.2的动态滑动菜单特效代码,常用于博客,鼠标滑过菜单,菜单会不断伸出,貌似很漂亮,我比较喜欢,发上来供大家使用或学习参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blog-move-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//

  • jQuery实现带延迟效果的滑动菜单代码

    jQuery实现带延迟效果的滑动菜单代码

    本文实例讲述了jQuery实现带延迟效果的滑动菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery的滑动菜单,鼠标移到某菜单项上,菜单的背景可以滑动过来,平滑的滑动效果,炫动的导航效果,相比没有动画的菜单,这款菜单真的挺不错哦. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-delay-style-menu-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

  • jquery实现最简单的滑动菜单效果代码

    jquery实现最简单的滑动菜单效果代码

    本文实例讲述了jquery实现最简单的滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一款最简单的jQuery下拉滑出菜单,jQuery代码实现,这里没有过多的去修饰菜单,仅是一些基本的实现,特别是对学习jQuery是个不错的参考实例,这里使用了一个jquery封装库文件jquery.tools.min.js,从外部引入,测试时候可能会因载入不成功而看不到效果,刷新一下网页即可解决此问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/

  • jquery实现左右滑动菜单效果代码

    jquery实现左右滑动菜单效果代码

    本文实例讲述了jquery实现左右滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了三种背景颜色左右滑动jquery菜单导航效果,IE下有问题,本菜单使用了CSS3的部分属性,因此建议使用火狐或Chrome等浏览器获取最佳效果.当把鼠标移到菜单上的时候,对应菜单项的背景会变化,而且本菜单具有圆角的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-right-move-style-menu-codes/ 具

  • 利用JQuery动画制作滑动菜单项效果实现步骤及代码

    利用JQuery动画制作滑动菜单项效果实现步骤及代码

    效果: 点击第二个菜单项后出现一个向上滑动的动画,控制margin-top底部另一个div中的文字 上移从而替换掉原有的文字. 原理其实不难无非就是css的控制加之jquery的代码 对docemnt中所有li绑定一个hover事件,事件中根据鼠标的状态(无非是移入与移除), 使用animate的动画方式使原有的div向上移70px,移出时再将页面效果变回原有的样子. 代码如下: 复制代码 代码如下: $(function () { var webNav = { val: { target: 0

  • 利用jquery动画特效和css打造的侧边弹出垂直导航

    利用jquery动画特效和css打造的侧边弹出垂直导航

    这是一款利用jquery动画特效和css打造的侧边弹出垂直导航,整个弹出过程比较流畅,而且代码很简单,如果你正在寻找一款带动画的垂直导航,那么可以试试这个.下面是效果截图: HTML源码: 复制代码 代码如下: <title>Jquery+CSS侧边弹出垂直导航</title> <style type="text/css"> html, body, ul, li { margin: 0; padding: 0; border: 0; outline:

  • jquery仿百度经验滑动切换浏览效果

    jquery仿百度经验滑动切换浏览效果 $(function() { wordStrong(); $("#content ul").width($("#content ul li:first").width()*$("#content ul li").length); $("#header .top_right .vote").hover(function() { $(this).children(".hover-t

  • Android Studio使用ViewPager+Fragment实现滑动菜单Tab效果

    Android Studio使用ViewPager+Fragment实现滑动菜单Tab效果

    本文为大家分享了Android Studio实现滑动菜单Tab效果的具体代码,供大家参考,具体内容如下 描述: 之前有做过一个记账本APP,拿来练手的,做的很简单,是用Eclipse开发的: 最近想把这个APP重新完善一下,添加了一些新的功能,并选用Android Studio来开发: APP已经完善了一部分,现在就想把已经做好的功能整理一下,记录下来. 效果图: 可以手动滑动菜单 也可以通过点击头部菜单进行切换 具体实现的代码: 前台代码(activity_main.xml): <?xml v

  • 利用jquery和BootStrap实现动态滚动条效果

    在某项目中遇到excel导入时客户要求显示滚动条效果,在此基础上使用js为其封装了个进度条类,只需要简单为其创建个div容器就可轻松实现效果,类具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=

  • 用Android MenuInflater创建菜单项的方法步骤

    用Android MenuInflater创建菜单项的方法步骤

    之前在一篇文章中已经讲过了菜单项的创建方法,但是那种方法效率较低,维护不易,现在实现另一种方法创建菜单. MenuInflater,通过此类我们可以轻松的创建菜单项,具体步骤如下: 1.在res/menu/文件夹下,找到main.xml文件,此文件就是我们定义菜单项的地方,在些文件中添加如下菜单项: 复制代码 代码如下: <item android:id="@+id/menu1" android:icon="@android:drawable/alert_dark_fr

  • 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=&qu

  • 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)

    利用jQuery简单实现产品展示图片左右滚动功能(示例代码)

    最近要做一个产品展示功能,由于产品比较多,一屏展示不完,所以想要做一个通过点击进行翻页的效果,在网上找了几个都不大好用,最后只能自己动手写了. 效果如下所示: 原理比较简单:将要滚动显示的区域的CSS的override设为hidden,宽度设成一个比较大的值,如4000px,然后每次点击上一页或下一页的按钮时,计算当前页数,如果已经到了最后一页,则回到第一页,滚动是通过控制div的left属性实现的,需要两个div,外面的div的position设为retative,里面的DIV的positio

随机推荐