消息上下滚动。。。

最新推荐文章于 2023-10-10 18:01:51 发布
一点嘿嘿。
最新推荐文章于 2023-10-10 18:01:51 发布
阅读量276
点赞数
本文链接：https://blog.csdn.net/qq_42431102/article/details/102501438
版权
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>消息滚动</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="../js/aes1.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->
<style>
   /*无缝滚动 上下*/
       .activity {
           width: 100%;
           padding-left: 14px;
           padding-right: 14px;
           position: relative;
           overflow: hidden;
           height: 85px;
           background-color: #fff;
       }

       .activity ul {
           top: -15px;
           padding: 0;
           color: #666;
           position: relative;
       }

       .activity li {
           height: 34px;
           padding: 0;
           font-size: 14px;
           line-height: 20px;
           text-align: left;
           list-style: none;
       }

       /*停顿滚动*/
       .maquee ul {
           width: 100%;
           height: 230px;
           color: #666;
       }

       .maquee li {
           width: 100%;
           height: 45px;
           background: #fff;
           line-height: 45px;
           text-align: center;
           font-size: 14px;
           border-bottom: 1px dashed #aaa;
       }

       /*公告栏-新闻滚动*/
       .apple ul li {
           height: 45px;
           line-height: 45px;
           font-size: 14px;
       }

       .apple ul li a {
           color: #000;
           display: block;
           padding-left: 20px;
           padding-right: 20px;
       }

       .apple ul li a:hover {
           color: red;
       }

       .apple ul li a span {
           float: right;
       }

       .Noticewarp a {
           color: #d61515;
           width: auto;
           float: left;
           margin-right: 40px;
           margin-left: 3px;
       }

       .Noticewarp .scroll {
           width: 9999px;
           float: left;
           position: relative;
       }

       .listli {
           margin: 0 10px;
           border-bottom: 1px solid #ddd;
           overflow: hidden;
           padding: 15px 0;
       }

       .listli:last-child {
           border: 0;
       }

       #slideshow {
           width: 980px;
           height: 450px;
           overflow: hidden;
           margin: 0 auto;
           position: relative;
       }

       #slideshow ul, #slideshow ul li, #slideshow-nav {
           list-style: none;
           position: absolute;
       }

       #slideshow-nav {
           width: 100%;
           bottom: 20px;
           text-align: center;
           visibility: hidden;
       }

       #slideshow-nav span {
           display: inline-block;
           border-radius: 50%;
           width: 15px;
           height: 15px;
           font-size: 0;
           background: rgba(255, 255, 255, .3);
           transition: all .5s;
           -webkit-transition: all .5s;
           margin: 0 7px;
           cursor: pointer;
           user-select: none;
           /*使圆点不能被选中*/
           -webkit-user-select: none;
       }

       #slideshow-nav span.active {
           background: #FFF;
       }

       #slideshow, ul, li, img {
           width: 980px;
       }

       @media screen and (max-width: 979px) {
           #slideshow, ul, li, img {
               width: 100%;
           }
       }

       .switch-btn {
           cursor: pointer;
           width: 45px;
           height: 28px;
           position: relative;
           border: 1px solid #dfdfdf;
           background-color: #fdfdfd;
           box-shadow: #dfdfdf 0 0 0 0 inset;
           border-radius: 15px;
           background-clip: content-box;
           display: inline-block;
           -webkit-appearance: none;
           user-select: none;
           outline: none;
       }

       .switch-btn:before {
           content: '';
           width: 25px;
           height: 25px;
           position: absolute;
           top: 0;
           left: 0;
           border-radius: 20px;
           background-color: #fff;
           box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
       }

       .switch-btn:checked {
           border-color: #56b0d4;
           box-shadow: #56b0d4 0 0 0 16px inset;
           background-color: #56b0d4;
       }

       .switch-btn:checked:before {
           left: 18px;
       }

       .switch-btn.switch-btn-animbg {
           transition: background-color ease .4s;
       }

       .switch-btn.switch-btn-animbg:before {
           transition: left .3s;
       }

       .switch-btn.switch-btn-animbg:checked {
           box-shadow: #dfdfdf 0 0 0 0 inset;
           background-color: #56b0d4;
           transition: border-color .4s, background-color ease .4s;
       }

       .switch-btn.switch-btn-animbg:checked:before {
           transition: left .3s;
       }
</style>
<script>
 //    新闻列表滚动
    function timer(opj) {
        $(opj).find('ul').animate({
            marginTop: "-45px"
        }, 500, function () {
            $(this).css({
                marginTop: "0px"
            }).find("li:first").appendTo(this);
        })
    }

    $(function () {
        var time = setInterval('timer(".apple")', 4000); //新闻列表滚动
        var mit = setInterval('timer(".maquee")', 3000); //停顿滚动
        $('.apple ul').find('li').mousemove(function () {
            clearInterval(time);
        }).mouseout(function () {
            time = setInterval('timer(".apple")', 3000);
        });
    });

    $(function () {
        var listPanel = $('.activity ul');
        var nubcers = 0; //向上滚动top值
        function up() { //向上滚动
            listPanel.animate({ //信息内容
                'top': (nubcers - 35) + 'px'
            }, 1500, 'linear', function () {
                listPanel.css({
                    'top': '0px'
                }).find("li:first").appendTo(listPanel);
                up();
            });
        }

        up();

    });

     var URL = sessionStorage.getItem("url");
        var userId = sessionStorage.getItem('userId');
        var cadreId = sessionStorage.getItem("cadreId");


        $(function () {

              $.ajax({
                    type: "post",
                    url: "",
                    async: false,
                    data:{
                       "cadreId":1
                    },
                    success: function (data) {
          //var key2 = CryptoJS.enc.Utf8.parse("djXNLYnew1103v1R");
        //var decrypt = CryptoJS.AES.decrypt(data, key2, {mode:CryptoJS.mode.ECB,padding:CryptoJS.pad.Pkcs7});
        //  var d =  CryptoJS.enc.Utf8.stringify(decrypt).toString();
         // console.log(JSON.parse(d));  //为后台数据回值解码

                  for (var da in JSON.parse(d).data) {
                        $("#newinfo").append("<li>"+JSON.parse(d).data[da].title+"</li>");
                  }

                }
            });
        });
</script>
<body>
  <div class="activity" id="J_Activity">
          <ul id="newinfo">
          </ul>
      </div>


</body>
</html>