Question

我正在使用bootstrap框架来制作我的网站。我需要在我的网站上创建一个自动滚动（选框）区域。我按照本指南来做到这一点。

URL： http://www.givainc.com/labs/marquee_jquery_plugin.cfm

但这不符合我的预期。火虫控制台上没有显示任何错误。

的header.php：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="viewport" content="width=device-width", initial-scale=1.0">
            <link href = "css/bootstrap.min.css" rel =  "stylesheet"/>
            <link href = "css/styles.css" rel = "stylesheet"/>


<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src = "js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery.marquee.js"></script>
                           <script type="text/javascript">
$(document).ready(function (){
  $("#marquee").marquee();
});
</script>

    </head>
    <body>

index.php：（即im包括index.php中的header.php文件）

<?php require_once('heder.php'); ?>


                <ul id="marquee" class="marquee">
                    <li>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a nulla. 
                        Lorem ipsum dolor sit amet, consectetuer.</li>
                    <li>
                        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
                        inceptos hymenaeos. Fusce tincidunt adipiscing,massa. Class aptent taciti 
                        sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
                        Fusce tincidunt adipiscing,massa.
                    </li>
                </ul>


            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <div style="background-image:url('images/tab1.png'); background-repeat: no-repeat; padding: 10px; height: 60px; margin: 0 auto;">
                    <div style="font-size:24px;margin-left: 10px; font-weight: normal; font-family: sans-serif; color: #fff;">
                        Our Expertise
                    </div>
                </div>
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

CSS样式：（在我的样式表中，我有一个像这样的类调用字幕）

ul.marquee {
display: block;
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
position: relative;
overflow: hidden;
width: 500px;
height: 22px;
background-color: #f2f2ff;
border: 1px solid #08084d;
}

任何人都可以帮我吗？

谢谢。

Answer 1

你必须包括剩余的CSS

ul.marquee li {
    /* required styles */
    position: absolute;
    top: -999em;
    left: 0;
    display: block;
    white-space: nowrap; /* keep all text on a single line */

    /* optional styles for appearance */
    font: 14px Arial, Helvetica, sans-serif;
    padding: 3px 5px;
}

Jquery marquee不使用bootstrap框架

1 个答案: