Jquery之新闻向上、下滚动

来源：互联网发布：黑暗之魂1数据编辑：程序博客网时间：2024/05/17 04:37

<!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>Jquery之新闻向上、下滚动</title>

<style type="text/css">
   *{padding:0; margin:0; list-style:none; text-decoration:none;}
       .content{ width: 1056px; height: 280px; border: 1px solid #919191; margin: 0 auto; position:relative; top:100px;}
       .news{ width: 350px; height: 280px; border: 1px solid #9E9E9E; float:left; }
       dl{width: 350px; height: 280px; }
       dl dt{width: 350px; height: 50px; line-height: 50px; text-align:center; font-size: 20px; color: white;}
       dl dd{width: 260px; height: 23px; font-size: 12px; line-height: 23px; vertical-align:middle; margin: 0 auto; }
       .move1 dt{ background-color: #5070B6;}
       .move2 dt{ background-color: #8CB419;}
       .move3 dt{ background-color: #FD9800;}
       dl dd a:hover{ text-decoration:underline; color: orange; cursor: pointer;}
   </style>
<script type="text/javascript" src="file:///E|/Adobe Dreamweaver CS6/jquery-3.2.1/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var flag = true;
   $(document).ready(function(e) {
       moveUp();
       //鼠标移动到#move1、#move2、#move3停止移动
       $("#move1").hover(
           function(){
               flag = false;
           },function(){
               flag = true;
           }
       );

       $("#move2").hover(
           function(){
               flag = false;
           },function(){
               flag = true;
           }
       );

       $("#move3").hover(
           function(){
               flag = false;
           },function(){
               flag = true;
           }
       );

   });
   function moveUp(){
       if(flag){

           //第一个向上移动
           $("#move1 dd:first").slideUp(600,function(){
               //把向上移动的第一个追加到最后一个
               $(this).appendTo("#move1").slideDown(600);
           });
           //第二个向下移动
           $("#move2 dd:first").slideDown(600,function(){
               //把向下移动的最后一个追加第一个
               $(this).appendTo("#move2").slideDown(600);
           });
           //第二个向上移动
           $("#move3 dd:first").slideUp(600,function(){
               $(this).appendTo("#move3").slideDown(600);
           });

       }
   setTimeout(moveUp,800);
   //setInterval(moveUp,800);
   }
</script>
</head>

<body>
   <div id="content" class="content">
        <div id="news1" class="news">
            <dl id="move1" class="move1">
                <dt>最新新闻</dt>
                <dd><a href="http://news.szhk.com/2017/08/15/282977676923709.html">[news]90后小伙抛纸币求</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/18/282977676924656.html">[news]巴塞罗那发生撞人事件</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/17/282977676924371.html">[news]美国拆除内战将领雕像</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/17/282977676924335.html">[news]菲律宾扫毒1天击毙32人创记录,总统称赞</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/11/282976442547306.html">[news]外交部国防部双双回应美军航擅入南海</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/20/282977676924915.html">[news]近3成大学生月生活费超1600,部分学生</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/20/282977676924913.html">[news]印度北方邦发生列车脱轨23人死亡</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/20/282977676924914.html">[news]英媒:俄飞行员跳槽中国月收入可达20万</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/21/282977676925015.html">[news]133个城市公布约车新政,打车贵"回潮"</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/20/282977676924916.html">[news]31省份养老金调整方案出炉,四川等地垫底</a></dd>
            </dl>

        </div>
        <div id="news" class="news">
            <dl id="move2" class="move2">
                <dt>最新新闻</dt>
                <dd><a href="http://news.szhk.com/2017/08/15/282977676923709.html">[news]90后小伙抛纸币求</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/18/282977676924656.html">[news]巴塞罗那发生撞人事件</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/17/282977676924371.html">[news]美国拆除内战将领雕像</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/17/282977676924335.html">[news]菲律宾扫毒1天击毙32人创记录,总统称赞</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/11/282976442547306.html">[news]外交部国防部双双回应美军航擅入南海</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/20/282977676924915.html">[news]近3成大学生月生活费超1600,部分学生</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/20/282977676924913.html">[news]印度北方邦发生列车脱轨23人死亡</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/20/282977676924914.html">[news]英媒:俄飞行员跳槽中国月收入可达20万</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/21/282977676925015.html">[news]133个城市公布约车新政,打车贵"回潮"</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/20/282977676924916.html">[news]31省份养老金调整方案出炉,四川等地垫底</a></dd>
            </dl>

        </div>
        <div id="news" class="news">
            <dl id="move3" class="move3">
                <dt>最新新闻</dt>
                <dd><a href="http://news.szhk.com/2017/08/15/282977676923709.html">[news]90后小伙抛纸币求</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/18/282977676924656.html">[news]巴塞罗那发生撞人事件</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/17/282977676924371.html">[news]美国拆除内战将领雕像</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/17/282977676924335.html">[news]菲律宾扫毒1天击毙32人创记录,总统称赞</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/11/282976442547306.html">[news]外交部国防部双双回应美军航擅入南海</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/20/282977676924915.html">[news]近3成大学生月生活费超1600,部分学生</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/20/282977676924913.html">[news]印度北方邦发生列车脱轨23人死亡</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/20/282977676924914.html">[news]英媒:俄飞行员跳槽中国月收入可达20万</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/21/282977676925015.html">[news]133个城市公布约车新政,打车贵"回潮"</a></dd>
                <dd><a href="http://news.szhk.com/2017/08/20/282977676924916.html">[news]31省份养老金调整方案出炉,四川等地垫底</a></dd>
            </dl>

        </div>
   </div>
</body>

</html>

阅读全文

0 0