EMLOG通过代码实现导航栏翻滚效果的高级特效

很多博主都非常喜欢折腾自己的网站，比如说给网站加个特效、加个点缀之类的，那么现在就来分享一个EMLOG通过代码实现导航栏翻滚效果的高级特效的方法。

一、操作步骤

1、打开模板文件header.php，添加如下代码

<link href="https://codepedia.info/files/uploads/iScripts/anchorHoverEffect.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://codepedia.info/files/uploads/iScripts/anchorHoverEffect.js" type="text/javascript"></script>

2、继续在模板文件header.php，找到<nav>标签，给下方的UL添加"demo-1"的class属性

3、继续在模板文件header.php，在nav导航栏下添加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>

3、打开网站首页，刷新查看效果

二、原理解析

给EMLOG导航栏指定属性，通过JS代码实现EMLOG导航栏翻滚的高级特效效果

三、注意事项

1、本教程中的使用的CSS和JS代码全部为外链，不保证对方不会设置外链或删除，因此建议还是保存在本地调用，文件已在附件中

四、附件下载