加载转圈的代码

最新推荐文章于 2022-12-06 15:38:16 发布

Vanqqqq

最新推荐文章于 2022-12-06 15:38:16 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： web javascript

本文链接：https://blog.csdn.net/Vanqqqq/article/details/46892109

web 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jQuery实现动态加载内容的方法，并通过无限滚动的方式展示新内容，同时还涉及了页面元素的样式调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<span style="color:#000099;">******标蓝部分为转圈代码，别的地方是我自己的其它东西      </span>

  * {
            margin: 0px;
            padding: 0px;
            border: 0px;
        }


        input {
            -webkit-appearance: none;
        }


        .main li {
            list-style-type: none;
            /*height: 160px;*/
        }


        .main a {
            /*height: 160px;*/
            display:block;
        }


        div {
            -moz-border-radius: 0.25em;
            -webkit-border-radius: 0.25em;
        }


        .newEvent {
            /*height: 200px;*/
            margin: 0.5em 0.62em;
        }


            .newEvent img {
                /*height: 160px;*/
                width: 100%;
                z-index: -1;
                -moz-border-radius: 0.25em;
                -webkit-border-radius: 0.25em;
            }


        .eventtitle {
            background-image: url("/Content/images/cut/eventbg.png");
            background-size:100%;
            background-repeat: repeat-x;
            height: 3.1em;
            padding: 0.62em 0 0 0.5em;
            position: relative;
            bottom: 3.93em;
            left: 0px;
            line-height: 4.06em;
        }


            .eventtitle input {
                background: none;
                border: 0px;
                font-size: 1em;
                color: white;
                /*width: 300px;*/
            }


        .noNew {
            font-size:0.9em;
            height: 1.25em;
            margin: 0 auto;
            text-align: center;
        }
    </style>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".newEvent img").height($(".newEvent img").width() / 1.7);
            $(".newEvent").height($(".newEvent img").height());
            $(".main").css("font-size", $(".newEvent img").height() / 11);
            $(".eventtitle input").width($(".newEvent img").width() - 30);
        })


    </script>
</head>
<body>
    <div class="main"> 
        <ul>
            @foreach (var item in ViewData["articlelist"] as List<LairmeyUserProject.Models.EventArticle>)
            {
                <li>
                    <div class="newEvent">
                        <a href="@item.ArticleUrl" style="height:160px">
                        <img src="/Content/EventImg/@item.BannerUrl" />
                            <div class="eventtitle">
                                <input disabled="disabled" value="@item.Tittle"/>
                            </div>
                        </a>
                    </div>
                </li>
            }
        </ul>
    </div>
    <span style="color:#000099;"><div class="div_load" style="margin: 10px auto; text-align: center; width: 300px;"> 
        <img id="img" src="~/Content/images/cut/loading.png" />
    </div></span>
    <script type="text/javascript">
        var x = 0;
        var canScroll = true;
        $(window).scroll(function () {
            if (canScroll) {
                var scrollTop = $(this).scrollTop();
                var scrollHeight = $(document).height();
                var windowHeight = $(this).height();
                if (scrollTop + windowHeight == scrollHeight) {
                    loading();
                    canScroll = false;
                    $.post("/Event/Index", { count: x }, function (data) {
                        stoploading();
                        x += 4;
                        $.each(data, function (i, item) {
                            $("ul").append("<li><div class='newEvent'><a href=" + item.ArticleUrl + "><img src=" + item.BannerUrl + " /><div class='eventtitle'><input disabled='disabled' value=" + item.Tittle + "/></a></div></li>");
                            canScroll = true;
                        })
                        if (data.length < 4) {
                            $("ul").append("<li style='margin-top:12px'><div class='noNew'>没有了更多了哦~</div></li>");
                            canScroll = false;
                        }
                    });
                }
            }
        })
        $(".div_load").hide();
        var Du = 0;
        var CssCode;
       <span style="color:#000099;"> function fransform() {
            Du++;
            var Objnode = document.getElementById('img');
            Objnode.setAttribute('style', '' + CssCode + 'transform:rotate(' + Du + 'deg); ' + CssCode + 'transform-origin: 50% 50%;');
            if (Du == 360) { Du = 0; }
        }
        function loading() {
            $(".div_load").slideDown();
            if (navigator.userAgent.indexOf("MSIE") > 0) { CssCode = "-ms"; }
            else if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) { CssCode = "-moz-"; }
            else if (isSafari = navigator.userAgent.indexOf("Safari") > 0) { CssCode = "-webkit-"; }
            else CssCode = "-o-";
            setInterval(fransform, 1);
        }</span>
        function stoploading() {
            clearInterval();
            $(".div_load").hide();
        }
    </script>