原创新闻屏幕滚动效果

 

 

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