0

我已经用一些文件在我的本地机器上成功地实现了Jpreloader功能。我是 wordpress 开发的新手。不是我懒，而是我不懂wordpress架构。我实现的代码如下：

html文件：

<!DOCTYPE  HTML>
<html>
    <head>


        <title> JPreLoader Tutorial </title>

    <!-- STEP 1 linking jQuery and JPreloader Library -->

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 


        <script type="text/javascript" src="jpreloader.js"></script>

    <!-- STEP 1 ends  -- >

        <!-- STEP 3 : Adding Style -->

        <style type="text/css">     


            body {
                display: none;
            }



            .decorate {
                border-style: solid;
                border-color: blac;
            }

            #jpreOverlay, #qLoverlay
            {
            background-color: #FFF;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 11
            }
            #jpreSlide {
            font-size: 22px;
            font-weight: 700;
            color: #FFF;
            text-align: center;
            width: 100%
            }
            #jpreLoader, #qLloader {
            width: 100px;
            height: 100px;
            background: url(speight.png) 0 100% no-repeat;
            position: fixed;
            top: 43%;
            left: 50%;
            margin-left: -50px
            }
            #jpreBar, #qLbar {
            width: 100px;
            height: 0;
            position: absolute;
            bottom: 0;
            background: url(speight.png) -100px 100% no-repeat
            }
            #jprePercentage, #qLpercentage {
            color: #888;
            text-align: center;
            position: absolute;
            height: 30px;
            width: 100px;
            bottom: -30px
            }
        </style>        
          <!-- STEP 3 Ends -->
    </head>
    <body>      
        <center>        

        <li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/181548_153793501342544_153515891370305_259700_7241508_n.jpg" /></li>
        <li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/196528_158118380910056_153515891370305_283882_234528_n.jpg" /></li>
        <li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/196556_159931940728700_153515891370305_293999_6261181_n.jpg" /></li>
        <li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-ash4/205687_165495210172373_153515891370305_326385_1869822_n.jpg" /></li>
        <li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/205600_167760236612537_153515891370305_338177_2160812_n.jpg" /></li>
        <li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/248150_174306909291203_153515891370305_374445_3774819_n.jpg" /></li>
        <li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/228343_171546129567281_153515891370305_358267_5126730_n.jpg" /></li>
        <li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-ash4/249232_174478049274089_153515891370305_375652_2662480_n.jpg" /></li>
        <li><img src="http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc6/268903_186646411390586_153515891370305_435046_34596_n.jpg" /></li>

        </center>


            <!-- STEP 2 -->
        <script type="text/javascript">
            $(document).ready(function() {
                $('body').jpreLoader({loaderVPos: '40%'});
            }); 

            <!-- STEP 2 Ends -->

            </script>
    </body>
</html>

** **

飞溅图像是：

在此处输入图像描述

**

输出如下：

** 在此处输入图像描述

4

2 回答 2

0

你并没有真正说出问题所在。事实是黑色正方形是矩形吗？

您是否将此页面上传到我可以看到的地方？

乍一看，我猜它是一个矩形的原因是：

height: 30px;
width: 100px;

此外，中心标签已被弃用，您不应使用它。尝试使用它：

margin-left:auto;
margin-right:auto;

希望这有帮助，如果没有，请提供更多信息。

于 2013-10-16T13:31:27.163 回答
0

由于您希望将其集成到 WordPress 中，您应该首先学习如何正确地将 jQuery CDN 和 jPreloader 脚本正确地包含到 WordPress 中。

您需要确保 jPreloader 依赖于 jQuery 并且它已正确入队。这是开始注册脚本的好链接

这是我在 WordPress 中加载 jPreloader 的示例代码。您需要将其放入您的functions.php 文件中。

wp_register_script('jPreloader', get_template_directory_uri() . '/assets/js/plugins/jpreloader.min.js', 'jquery', null, false);
wp_register_script('mainJS', get_template_directory_uri() . '/assets/js/main.js', 'jquery', null, true);

wp_enqueue_script('jPreloader');
wp_enqueue_script('mainJS');

一旦你已经加载并准备好了 jPreloader 脚本并且你的 .js 文件准备好了（我命名为我的 main.js），你想将它包含在你的 .js 文件中

 jQuery(document).ready(function() {

 jQuery('body').jpreLoader();
 });

然后你可以从那里开始玩css。当我需要编辑 CSS 时，我使用 Google Chrome Dev Tools 将其暂停。

Adham Dannaway 的 Portfolio Website是带有 sprite 的工作 jPreloader 的一个很好的实例。您可以查看他的 CSS 源代码以及他如何包含 sprite 以获得让 jPreloader 看起来不错的良好起点。

于 2013-10-16T20:43:26.470 回答