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

2019-9-30 / 0 评论 / 785 阅读
注意:本文最后更新于2019-9-30,已超半年没有更新,若内容或图片失效,请留言反馈。

很多博主都非常喜欢折腾自己的网站,比如说给网站加个特效、加个点缀之类的,那么现在就来分享一个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代码全部为外链,不保证对方不会设置外链或删除,因此建议还是保存在本地调用,文件已在附件中

四、附件下载

EMLOG实现导航栏翻滚效果特效大小:36KB | 密码:无 | 来源:本站下载

评论一下?

OωO
取消