jQuery - 实例- 小小动画导航栏

所以我们学到了三个东西：

1.回顾一次CSS：

定位的时候　记住了！　绝对定位和相对定位　的参照是谁　特别是绝对定位的参照要注意，是生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位

还有就是 pointer-events: none; CSS　的这个属性　　他是直接可以忽略事件的发生的！！！　具体百度吧！！但是这个很有必要知道!!!

2.一些jq的动画啊还有就是 stop 和 finsh 的应用,这些要会用即可,emmmm 还有一下事件,那些也一样要会知道会用即可.

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>BiHu导航</title><script src="jqsourse.js"></script><style type="text/css">* {margin: 0;padding: 0;}ul {width: 1000px;height: 50px;margin: 30px auto;border-bottom: 3px solid #1fd6be;position: relative;}ul > li {list-style: none;width: 100px;height: 50px;float: left;cursor: pointer;text-align: center;line-height: 50px;}ul > span {width: 100px;height: 50px;position: absolute;text-align: center;line-height: 50px;background-color: #1fd6be;border-bottom: solid red 3px;left: 0;color: #fff;cursor: pointer;/* 不作为事件目标*   会直接忽略他的事件*/pointer-events: none;}</style>
</head>
<body><ul><li>首页</li><li>咨询</li><li>体育</li><li>政治</li><li>本地</li><li>游戏</li><li>电子</li><li>科技</li><li>经济</li><li>音乐</li><span>首页</span>
</ul><script>//鼠标放上去时 我就动画跑起来$('li').stop().on('mouseover',function () {$('span').animate({left:$(this).index() * 100},100,'linear').text($(this).text());});//鼠标点击时 我就打印自己的内容$('li').on('click',function (){alert($(this).text())});//如果离开li的话 那我span我就直接完成到最后那次移动$('li').mouseout(function (){$('span').finish();});
</script></body>
</html>

jQuery - 实例- 小小动画导航栏相关推荐

【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
视频直播app源码，底部动画导航栏
视频直播APP源码实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNavigationBarItem 自 ...
flutter 底部动画导航栏
更多文章请查看 lutter从入门到精通实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNaviga ...
使用JQuery实现淘宝导航栏效果
我们要实现一个淘宝导航栏的效果,先看一下运行效果要实现这个效果的话我们第一步首先要 1.div布局设id <div id="context"><div id= ...
使用jQuery实现图书菜单导航栏
案例: 一.首先我们先写一个HTML布局 <html><head><meta charset="utf-8"><title>< ...
侧边导航栏代码css,【源码分享】jquery+css实现侧边导航栏(示例代码)
1 2 3 /*重置一些样式*/ 4 *, *::after, *::before{ 5 box-sizing:border-box; 6 /*padding: 0;*/ 7 margin:0; 8 ...
jQuery 滚动屏幕顶部导航栏加背景色
顶部的导航条默认是透明的,滚动之后增加背景色!逻辑就是判断滚动条滚动下去之后,就给导航条加一个class样式下面给大家分享简单的代码! css部分加了背景色和渐变动画 .ea55_com_head ...
超好用的简单的jquery tab选项卡切换代码（点击切换和导航栏滑过）
实例1(点击切换): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 ...
列表导航栏实例（02）——精美电子商务网站赏析
出处:http://www.gabbardhatchingeggs.com/ [准备工作] 一.如图示,创建网站框架: 二.reset.css文件参考内容: /*YUI的CSS Reset http: ...

jQuery - 实例- 小小动画导航栏

jQuery - 实例- 小小动画导航栏相关推荐

最新文章

热门文章