flow infomation by jquery

最新推荐文章于 2025-12-21 22:09:29 发布

原创最新推荐文章于 2025-12-21 22:09:29 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#class #stylesheet #function #xhtml #jquery #div

本文展示了如何使用HTML、CSS、JavaScript实现滚动新闻的展示，并通过简单的交互操作展示新闻细节。

<!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 http-equiv="content-type" content="text/html; charset=utf-8">
<title>notice</title>
<link rel="stylesheet" href="./src/style.css" type="text/css" media="screen">
<script src="./src/jquery.js" type="text/javascript"></script>
<script src="./src/rollingnews.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">

   $(document).ready(function() {
       $('ul.spyContent').simpleSpy();


       $("div.bar").hover(
           function () {
                    var item = $(this).attr("rel");
                   $('#'+item).fadeIn(200);
                  },
                  function () {
                    var item = $(this).attr("rel");
                   $('#'+item).hide();
                  }
       );

   });

</script>
</head>

<body>
      <div id="news">
        <div class="newsbody">
            <ul class="spyContent">
              <li><a href="" target="">1</a> <span class="pos">0</span> <span class="neg">0</span><br>
                31st Thu Mar, 14:02<span style="color:#08536D;margin-left:6px;">Reuters</span></li>
              <li><a href="" target="">2</a> <span class="pos">0</span> <span class="neg">0</span><br>
                31st Thu Mar, 14:02<span style="color:#08536D;margin-left:6px;">Reuters</span></li>
              <li><a href="" target="">3</a> <span class="pos">1</span> <span class="neg">0</span><br>
                31st Thu Mar, 14:02<span style="color:#08536D;margin-left:6px;">Reuters</span></li>
              <li><a href="" target="">4</a> <span class="pos">0</span> <span class="neg">0</span><br>
                31st Thu Mar, 16:04<span style="color:#08536D;margin-left:6px;">Reuters</span></li>
              <li><a href="" target="">5</a> <span class="pos">1</span> <span class="neg">0</span><br>
                31st Thu Mar, 16:04<span style="color:#08536D;margin-left:6px;">Reuters</span></li>
            </ul>
        </div>
      </div>
</body>
</html>