无法使用jQuery使用垂直滚动新闻自动收报机插件

时间:2012-11-24 08:18:12

标签: jquery css jquery-plugins

我试图在我的页面中使用jQuery使用这个垂直滚动news ticker插件。我已经在我的页面中完成了这个


在我的html页面

<div id="newsticker-container">
   <ul>
      <li>
        <div>1) Facebook type vertical navigation menu</div>
      </li> 
      <li>
        <div>2) Facebook type vertical navigation menu</div>
      </li>
      <li>
        <div>3) Facebook type vertical navigation menu</div>
      </li>
      <li>
        <div>4) Facebook type vertical navigation menu</div>
      </li>
      <li>
        <div>5) Facebook type vertical navigation menu</div>
      </li>
      <li>
        <div>5) Facebook type vertical navigation menu</div>
      </li>
      <li>
        <div>6) Facebook type vertical navigation menu</div>
      </li>
      <li>
        <div>7) Facebook type vertical navigation menu</div>
      </li>
   </ul>
</div>

在头部我jave包含了Javascript

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/newsticker.js"></script>
<script type="text/javascript">
$(function(){
    $('#newsticker-container').newsTicker();
});
</script>

在css部分,我已经完成了

#newsticker-container a{color: #D83B97;text-decoration: none;}
#newsticker-container
{
    width: 200px; 
    margin: auto;
    margin-top: 30px;
    border: 5px solid #eeeeee;
    background-color: red;
}

#newsticker-container ul li div
{
    border-top: 1px solid #e2e2e2;
    background: #ffffff;
    padding: 10px 5px;
}

然而,css似乎存在一些问题。看看它:


enter image description here

这里的错误是什么?

1 个答案:

答案 0 :(得分:0)

请插入此代码

<link rel="stylesheet" type="text/css" href="index.css" media="all">

之后

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

没有:

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="newsticker.js"></script>
<script type="text/javascript">
$(function(){
    $('#newsticker-container').newsTicker();
});
</script>
<style>
body, html { padding: 0px; margin: 0px; }
body { background: none repeat scroll 0% 0% rgb(204, 204, 204); }
#newsticker-container a { color: rgb(216, 59, 151); text-decoration: none; }
#newsticker-container { width: 400px; margin: 30px auto auto; border: 5px solid rgb(238, 238, 238); }
#newsticker-container ul li div { border-top: 1px solid rgb(226, 226, 226); background: none repeat scroll 0% 0% rgb(255, 255, 255); padding: 10px 5px; }
</style>
<div id="newsticker-container">
   <ul>
      <li>
        <div>1) Facebook type vertical navigation menu</div>
      </li> 
      <li>
        <div>2) Facebook type vertical navigation menu</div>
      </li>
      <li>
        <div>3) Facebook type vertical navigation menu</div>
      </li>
      <li>
        <div>4) Facebook type vertical navigation menu</div>
      </li>
      <li>
        <div>5) Facebook type vertical navigation menu</div>
      </li>
      <li>
        <div>5) Facebook type vertical navigation menu</div>
      </li>
      <li>
        <div>6) Facebook type vertical navigation menu</div>
      </li>
      <li>
        <div>7) Facebook type vertical navigation menu</div>
      </li>
   </ul>
</div>
相关问题