emlog 做高级特效 - 导航栏翻滚效果

小编最近没事情做,看到别的网站的导航栏的动态效果好漂亮

所以小编决定自己也写一个。

导航栏动态翻滚

第一步。导入CSS以及JS,这边我放出连接:

代码语言:javascript
复制
<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调用代码

代码语言:javascript
复制
<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>

第四步:完成啦!

刷新主页!是不是看到了超屌的翻滚效果呢!原创文章,转载请留名。