MVC简单的界面数据滚动

<style type="text/css">
    <!--
    #demo {
        background: #FFF;
        overflow: hidden;
        border: 1px dashed #CCC;
        width: 500px;
    }


        #demo img {
            border: 3px solid #F2F2F2;
        }


    #indemo {
        float: left;
        width: 800%;
    }


    #demo1 {
        float: left;
    }


    #demo2 {
        float: left;
    }
    -->
</style>
向左滚动
<div id="demo">
    <div id="indemo">
        <div id="demo1">
            @foreach (var item in Model)
            {
            <p>
            //这里是MVC遍历输出滚动的数据
                @Html.DisplayFor(modelItem => item.Atitle)
                @Html.DisplayFor(modelItem => item.Aremark)
            </p>
            }
            </div>
        <div id="demo2"></div>
    </div>
</div>

<script>
<!--
    var speed = 10; //数字越大速度越慢
    var tab = document.getElementById("demo");
    var tab1 = document.getElementById("demo1");
    var tab2 = document.getElementById("demo2");
    tab2.innerHTML = tab1.innerHTML;
    function Marquee() {
        if (tab2.offsetWidth - tab.scrollLeft <= 0)
            tab.scrollLeft -= tab1.offsetWidth
        else {
            tab.scrollLeft++;
        }
    }
    var MyMar = setInterval(Marquee, speed);
    tab.οnmοuseοver = function () { clearInterval(MyMar) };
    tab.οnmοuseοut = function () { MyMar = setInterval(Marquee, speed) };


</script>
发布了43 篇原创文章 · 获赞 35 · 访问量 1606

猜你喜欢

转载自blog.csdn.net/qq_45244974/article/details/103583161
今日推荐