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

  • 相关阅读:
    网络唤醒的尝试
    远程桌面连接修改与远程连接的痕迹清理+User Profile Service服务未能登录,无法加载用户配置文件
    web与flash结合:不出现提示,直接关闭窗口(javascript)+直接关闭,不提示
    net framework 2.0,3.0与3.5三个版本之间关系
    c#连接access2003操作必须使用一个可更新的查询解决方法
    分析网络故障慢慢来!一定要抓到真凶(有关arp)
    GridView遭遇数据类型"是/否",获取gridview的一个单元格的值并更改,附带更新GridView用法
    查询和删除表中重复数据sql语句
    hibernate学习笔记
    不要在一门技术上吊死
  • 原文地址:https://www.cnblogs.com/zhengrunqiang/p/2746465.html
Copyright © 2011-2022 走看看