0

私のページで 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>

head セクションに 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 に問題があるようです。それを見てください：

ここに画像の説明を入力

ここで間違いは何ですか？

4

1 に答える 1

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>
于 2012-11-24T08:45:17.607 に答える