emlog 做高级特效 - 导航栏翻滚效果
1
2068
2017年9月30日
小编最近没事情做，看到别的网站的导航栏的动态效果好漂亮
所以小编决定自己也写一个。
导航栏动态翻滚
第一步。导入CSS以及JS，这边我放出连接：
- <link rel="stylesheet" href="http://oc3b8f69s.bkt.clouddn.com/anchorHoverEffect.css" type="text/css" media="all" />
- <script src="http://oc3b8f69s.bkt.clouddn.com/anchorHoverEffect.js"></script>
第二步：设置导航栏的UL加class效果 class="demo-1"。
例子图在上方。找到<nav>标签，给下方的UL加 "demo-1" class属性
第三部：设置JS调用代码
- <script>
- $(function(){
- $(".demo-1 a").anchorHoverEffect();
- $(".demo-2 a").anchorHoverEffect({type: 'brackets'});
- $(".demo-3 a").anchorHoverEffect({type: 'flip'});
- $(".demo-4 a").anchorHoverEffect({type: 'borderBottom'});
- })
- </script>
第四步：完成啦！
刷新主页！是不是看到了超屌的翻滚效果呢！原创文章，转载请留名。
在线咨询
这个主题简介啊