2014-01-14 32 views
0

我使用引导框架工作,使我的网站。我需要在我的网站上制作一个自动滚动(字幕)区域。 我遵循本指南来做到这一点。jquery选框不工作与引导框架工作

网址: 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; 
} 

任何人都可以帮助我吗?

谢谢。

+1

请,创造大的代码示例'jsfiddle' /'codepen'例如... – Pinal

+1

你纵横什么,而不是工作?????? –

+1

看你还没有收录剩余的css –

回答

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; 
} 
+1

它没有为我工作。相反,我使用这个http://www.jonathan-petitcolas.com/2013/05/06/simulate-marquee-tag-in-css-and-javascript.html它运作良好。 –