2012-11-24 60 views
0

我想使用這個垂直滾動news ticker插件在我的頁面中使用jQuery。我在我的網頁無法使用垂直滾動新聞股票插件使用jQuery


在我的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

這裏有什麼錯誤?

+0

是否jQuery的工作如預期? – Abhilash

回答

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>