zoukankan      html  css  js  c++  java
  • 原创新闻屏幕滚动效果

     <div class="w1000">
            <ul class="interactList" id="container">
            </ul>
            <script type="ctemplate" id="information" style="display: none">
             <li class="{$changeclass(@index)}">
                    <div class="margin-b10 fontB">
                        {$showinfo(@DuserName,@NDuserName,@IsQuestion)}
                    </div>
                    <div class="cFix">
                        <div class="float-l inListHend">
                            <div class="imgBor">
                                <img src="{$validteImg(@HeaderUrl,@IsQuestion)}" alt="" /></div>
                        </div>
                        <div class="float-l cFix">
                            <div class="inListFont">
                                {@Xcontext}
                            </div>
                            <div class="inListData margin-t10 colorGray">
                                <font>{@FromOrg}</font> <font class="data">{@CreateTime}</font>
                            </div>
                        </div>
                    </div>
                </li>
            </script>
        </div>

     <script type="text/javascript">

    $(document).ready(function(){

    var $ul = $("#container");
                var scrtime;
                // 初始化容器样式和事件
                $ul.css({
                    'overflow': 'hidden'
                }).hover(function () {
                    // 鼠标进入时 停止滚动    
                    clearInterval(scrtime);
                }, function () {
                    // 鼠标离开  重新开始滚动
                    scrtime = setInterval(function () {
                        var liHeight = $ul.find("li:last").height();
                        $ul.animate({ marginTop: liHeight+34 }, 3000, function () {
                            $ul.find("li:last").prependTo($ul);
                            $ul.find("li:first").hide();
                            $ul.css({ marginTop: -25 });
                            $ul.find("li:first").fadeIn(3000);
                        });
                    }, 6000);
                }).trigger('mouseleave');

    });

    </script>

    备注:其中container是数据源容器,根据实际的自己的项目数据源得到,其中margin-Top:-25是根据container这个ul容器的margin-top得到的,而marginTop:liHeight+34中的34像素是li与li之间的高度!

  • 相关阅读:
    使用 git 及 github
    layUi数据表格自动渲染
    Linux下Tomcat重新启动 和查看日志
    禁止页面后退js(兼容各浏览器)
    通俗讲解计算机网络五层协议
    浏览器与服务器交互的过程
    转载 为什么会有前后端分离
    Kubernetes & Docker 容器网络终极之战(十四)
    Kubernetes 配置管理 Dashboard(十三)
    Kubernetes 配置管理 ConfigMap(十二)
  • 原文地址:https://www.cnblogs.com/zhengrunqiang/p/2746465.html
Copyright © 2011-2022 走看看