仿百度导航跟随效果demo效果示例（整理）

<!doctype html>
<html><head><meta charset="utf-8"><title>导航滑动跟随效果</title><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><style>* {margin: 0px;padding: 0px;}body {font-size: 12px;min-width: 1200px;}fieldset,img {border: none;}input,select,textarea {font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;font-size: 100%;outline: none;}li {list-style: none;font-style: normal;}table {border-collapse: collapse;border-spacing: 0;}.nav {height: 60px;background: #dca3a3;position: relative;}.nav li {float: left;height: 60px;}.nav li a {display: block;height: 60px;line-height: 60px;padding: 0 20px;min-width: 100px;text-align: center;font-size: 16px;color: #fff;position: relative;z-index: 10px;text-decoration: none;}.nav li a:hover {text-decoration: none;}.gl {position: absolute;top: 0;left: 0;height: 60px;background: #00bc12;z-index: 9px;width: 140px;}</style></head><body><div class="w_1200" style="padding:0 0 100px 0;position:relative;"><div class="nav"><div class="gl"></div><ul><li><a href="###">首页</a></li><li><a href="###">我是导航一</a></li><li><a href="###">我是导航二</a></li><li><a href="###">我是导航三</a></li><li><a href="###">我是导航四</a></li><li><a href="###">我是导航五</a></li><li><a href="###">我是导航六</a></li></ul></div></div><script>$(".nav ul a").each(function() {var hover_a = $(this);var hover_awidth = $(this).innerWidth();var hover_aleft = hover_a.position().left;$(this).mouseover(function() {$(".gl").stop();hover_awidth = $(this).innerWidth();$(".gl").animate({left: hover_aleft + "px",width: hover_awidth + "px"}, 250);})$(this).mouseout(function() {$(".gl").stop();if ($(this).parent().parent().find(".gl_hover").length > 0) {var gl_hover_left = $(this).parent().parent().find(".gl_hover").position().left;hover_awidth = $(this).parent().parent().find(".gl_hover").innerWidth();$(".gl").animate({left: gl_hover_left + "px",width: hover_awidth + "px"}, 250);} else {hover_awidth = $(".nav ul a:first").innerWidth();$(".gl").animate({left: "0px",width: hover_awidth + "px"}, 250);}})})$(".nav ul a").click(function() {$(this).parent().siblings().removeClass("gl_hover");$(this).parent().addClass("gl_hover");})</script></body></html>

仿百度导航跟随效果demo效果示例（整理）相关推荐

php 点击下拉显示内容,php+ajax实现仿百度查询下拉内容功能示例
本文实例讲述了php+ajax实现仿百度查询下拉内容功能.分享给大家供大家参考,具体如下: 运行效果如下: html代码: Document body{ margin:0; padding: 0; } ...
html搜索框下拉怎么做,一步一步教你实现仿百度搜索框下拉效果（上）
最终效果(chrome 下): 搜索框下拉 demo 今天就来简单讲解下如何做这样一个类似百度搜索框的下拉效果. 1.html 以及 css 部分首先你得要有个输入框,这里我用了控件,其次当用户 ...
仿百度动态Android源码,Android 仿百度手机助手首页滑动效果
今天看到百度手机助手首页上的滑动效果非常nice,主要功能归结为: 1.当手指上划时,顶部搜索栏随手指移动距离而缩小到隐藏,隐藏后内容还是可以继续移动 2.手指下滑时,当显示内容达到第一个时,顶部搜索 ...
仿百度糯米团顶部搜索栏动画效果
看到百度糯米6.7版本顶部搜索栏有个动画效果如下: 首先这不是个简单的缩放变宽的动画,因为里面的字体整体左移. 所以应该可以做成两个重叠的布局,上层的做左移动画,底层的右移动画. 反之就动画反过 ...
仿百度地图抽屉拖拽效果
ScrollLayout ScrollTo ScrollBy 事件传递 ScrollTo.ScrollBy说明 ScrollTo和ScrollBy滑动的是该View的显示内容(子View),并不改变该 ...
在图片上停留时逐渐增强或减弱的透明效果demo效果示例（整理）
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
js手机端下拉刷新效果demo效果示例（整理）
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
jQuery实现百度导航li拖放排列效果，即时更新数据库
index.php中 var autoSave = false; 控制不自动提交. index.php <?phprequire 'db.php';$query = "SELECT ` ...
HTML+CSS+JS仿百度导航（包括下拉框等）
效果展示代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...
仿百度外卖的酷炫水波纹效果
2019独角兽企业重金招聘Python工程师标准>>> 我们先来看下这个自定义的View的代码是如何实现的. 我们一步步来分析.首先我们要自定义一个View. 自定义View流程我 ...

仿百度导航跟随效果demo效果示例（整理）

仿百度导航跟随效果demo效果示例（整理）相关推荐

最新文章

热门文章