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

  • 相关阅读:
    文件上传控件 jQueryFileUpload在 MVC3中的实现
    谈谈开心王国的用户注册页面
    一个个人网站如何融资一千万
    netTcpBinding三种方法实现调用函数
    MVC实现RadioButtonList
    网易盖楼回复的简易实现
    sqlserver复制表结构
    显示目录下所有文件列表
    Jira:用户权限设置
    C#:Socket通信
  • 原文地址:https://www.cnblogs.com/zhengrunqiang/p/2746465.html
Copyright © 2011-2022 走看看