• 原创新闻屏幕滚动效果


     <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之间的高度!

  • 相关阅读:
    Segmentation fault (core dumped)
    Missing separate debuginfos, use: debuginfo-install
    Qt学习资源
    Qt学习过程中遇到的问题
    深入浅出MFC--第一章
    MVC – 3.EF(Entity Framework)
    MVC基础知识 – 2.新语法
    js获取url参数值(HTML之间传值)
    解决IIS7、IIS7.5中时间格式显示的问题
    web.config详解 -- asp.net夜话之十一
  • 原文地址:https://www.cnblogs.com/zhengrunqiang/p/2746465.html
Copyright © 2020-2023  润新知