列表无缝滚动_编程笔记

列表无缝滚动

2025-05-09 13:42:33  浏览:5  作者:保利尼奥
<div id="ydemo"> <div id="yindemo"> <div id="ydemo1"> <ul class="news_cc"> {% for value...

<div id="ydemo">
    <div id="yindemo">
        <div id="ydemo1">

            <ul class="news_cc">
                {% for value in news.show(3,4,0,1) %}
                <li>
                    <a href="{{ value.url }}" title="{{ value.title }}">
                        <h3>{{ value.title|truncate(40,'...') }}</h3>
                        <span>{{ value.summary|truncate(80,'...') }}</span>
                        <div class="time_inff">
                            {{ value.timeline|date("Y-m-d") }}
                        </div>
                    </a>
                </li>
                {% endfor %}
            </ul>


        </div>
        <div id="ydemo2"></div>
    </div>
</div>


<script type="text/javascript">
    

    function news_scroll() {
        //产品滚动
        var speed = 60; //数字越大速度越慢
        var tab = document.getElementById("ydemo");
        var tab1 = document.getElementById("ydemo1");
        var tab2 = document.getElementById("ydemo2");
        tab2.innerHTML = tab1.innerHTML;

        function Marquee() {
            if (tab2.offsetHeight - tab.scrollTop <= 0) {
                tab.scrollTop = 0;
            } else {
                var tmp = tab.scrollTop;
                tab.scrollTop++;
                if (tab.scrollTop == tmp) {
                    tab.scrollTop = 1;
                }
            }
        }
        var MyMar = setInterval(Marquee, speed);
        tab.onmouseover = function () {
            clearInterval(MyMar);
        };

        tab.onmouseout = function () {
            MyMar = setInterval(Marquee, speed);
        };
    }

</script>

<style>
    #ydemo{overflow:hidden;margin:0 auto;position:relative;height:420px;}
    #yindemo{height:100%}

</style>


上一篇:产品二级分类

下一篇:已经是最后一篇

评论区

共 0 条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

【随机内容】

返回顶部