利用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();
});
相关推荐
-
jQuery实现带延迟效果的滑动菜单代码
本文实例讲述了jQuery实现带延迟效果的滑动菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery的滑动菜单,鼠标移到某菜单项上,菜单的背景可以滑动过来,平滑的滑动效果,炫动的导航效果,相比没有动画的菜单,这款菜单真的挺不错哦. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-delay-style-menu-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/
-
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实现左右滑动菜单效果代码
本文实例讲述了jquery实现左右滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了三种背景颜色左右滑动jquery菜单导航效果,IE下有问题,本菜单使用了CSS3的部分属性,因此建议使用火狐或Chrome等浏览器获取最佳效果.当把鼠标移到菜单上的时候,对应菜单项的背景会变化,而且本菜单具有圆角的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-right-move-style-menu-codes/ 具
-
jquery实现最简单的滑动菜单效果代码
本文实例讲述了jquery实现最简单的滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一款最简单的jQuery下拉滑出菜单,jQuery代码实现,这里没有过多的去修饰菜单,仅是一些基本的实现,特别是对学习jQuery是个不错的参考实例,这里使用了一个jquery封装库文件jquery.tools.min.js,从外部引入,测试时候可能会因载入不成功而看不到效果,刷新一下网页即可解决此问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/
-
jQuery实现可用于博客的动态滑动菜单完整实例
本文实例讲述了jQuery实现可用于博客的动态滑动菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery1.3.2的动态滑动菜单特效代码,常用于博客,鼠标滑过菜单,菜单会不断伸出,貌似很漂亮,我比较喜欢,发上来供大家使用或学习参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blog-move-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//
-
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的横向滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一个仿Flash的jquery滑动菜单,横向,延时效果明显,如果觉得延时太长的话,自己可以修改参数,通过这个菜单主要是想向大家掌握一些jQuery生成动画的技巧,同时这也是jquery强大功能的体现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-flash-style-move-menu-codes/ 具体代码如下: <!
-
利用JQuery动画制作滑动菜单项效果实现步骤及代码
效果: 点击第二个菜单项后出现一个向上滑动的动画,控制margin-top底部另一个div中的文字 上移从而替换掉原有的文字. 原理其实不难无非就是css的控制加之jquery的代码 对docemnt中所有li绑定一个hover事件,事件中根据鼠标的状态(无非是移入与移除), 使用animate的动画方式使原有的div向上移70px,移出时再将页面效果变回原有的样子. 代码如下: 复制代码 代码如下: $(function () { var webNav = { val: { target: 0
-
利用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实现滑动菜单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创建菜单项的方法步骤
之前在一篇文章中已经讲过了菜单项的创建方法,但是那种方法效率较低,维护不易,现在实现另一种方法创建菜单. 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简单实现产品展示图片左右滚动功能(示例代码)
最近要做一个产品展示功能,由于产品比较多,一屏展示不完,所以想要做一个通过点击进行翻页的效果,在网上找了几个都不大好用,最后只能自己动手写了. 效果如下所示: 原理比较简单:将要滚动显示的区域的CSS的override设为hidden,宽度设成一个比较大的值,如4000px,然后每次点击上一页或下一页的按钮时,计算当前页数,如果已经到了最后一页,则回到第一页,滚动是通过控制div的left属性实现的,需要两个div,外面的div的position设为retative,里面的DIV的positio
随机推荐
- Linux网络编程之基于UDP实现可靠的文件传输示例
- IOS 开发状态栏隐藏的实现办法
- 解决iOS调起微信支付显示系统繁忙问题
- js贪吃蛇游戏实现思路和源码
- 如何判断微信内置浏览器(通过User Agent实现)
- SimpleCommand实现图片下载(二)
- C++实现将数组中的值反转
- 在Linux系统的命令行中为MySQL创建用户的方法
- Linux下MySQL 5.6.27 安装教程
- MySQL rownumber SQL生成自增长序号使用介绍
- php通过分类列表产生分类树数组的方法
- javascript实现微信分享
- 基于JavaScript实现回到页面顶部动画代码
- jquery预加载图片的方法
- js控制iframe的高度/宽度让其自适应内容
- jQuery获得子元素个数的方法
- 使用Node.js实现一个简单的FastCGI服务器实例
- 通过js为元素添加多项样式,浏览器全兼容写法
- php中adodbzip类实例
- C#编程读取文档Doc、Docx及Pdf内容的方法