当前位置:首页>Wordpress教程>为WP主题添加”网页加载中”特效

为WP主题添加”网页加载中”特效

为了增加浏览者浸入式体验,不在等待脚本运行时感到枯燥,从而重启手机,很多网站都会设置一个“网页出现未知错误”警告信息效果或显示加载进程,启动软件后提示消失,大部分都是广泛应用于网站上的首页,今天呢跟大家分享把它的特效存放在Wordpresn卡第五题。要取得该特效同样是少不了把jquery,但如果你和我目前用作品主题一样,无法实现其它特效已提前加载被mquery,那么正好充分利用jquerj的强大功能,添加此特效你还在等什么?当然仅仅为了实现这个特效,而开始加载50几K的jquery感觉有点太亏了。具体效果可以看你的微博。
实现方法:

打cweader.ftl文件文件

第一步:加载jquery.min.js

外链接格式:

<script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js”></script>

网站外链格式:

<script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/js/jquery.min.js” ></script>

第二步:在</head>前添加一段JS代码

<script type=”text/javascript”>
jQuery(function(){
jQuery(‘#loading-one’).empty().append(‘页面加载完毕.’).parent().fadeOut(‘slow’);
});</script>

第三步:在<body>后添加解析力样式

<div id=”loading” style=”position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background:#000 url(这里输入一个地图地址) no-repeat center; opacity:0.6; filter:alpha(opacity=60);font-size:14px;line-height:20px;” onclick=”javascript:turnoff(‘loading’)”>
<p id=”loading-one” style=”color:#fff;position:absolute; top:50%; left:50%; margin:50px 0 0 -50px; padding:3px 10px;” onclick=”javascript:turnoff(‘loading’)”>页面出现未知错误,请耐心等待…</p>
</div>

字体字号格式限,不添加拼音也可以,来到这里该特效添加完毕.

文章链接:https://www.7zt.cn/2596.html
文章标题:为WP主题添加”网页加载中”特效
文章版权:柒主题 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!
本文最后更新发布于2022年11月18日 20时40分54秒,某些文章具有时效性,若有错误或已失效,请在下方留言或联系:21660010@qq.com
声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 柒主题 或点击右侧 私信:站长 反馈,我们将尽快处理。

给TA打赏
共{{data.count}}人
人已打赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索