jQuery-滚动效果

CSS文件：

.wp_SLIP {position: relative;width:518px;height:728px;overflow:hidden;margin:20px auto;}
.WEIBO_SLIP {position: relative;width:300px;height:1140px;overflow:hidden;margin:20px auto;}

JS渐变效果：（来自网络）

function H$(i) { return document.getElementById(i) }
function H$$(c, p) { return p.getElementsByTagName(c) }
var slider = function() {
    function inits(o) {
        this.id = o.id;
        this.at = o.auto ? o.auto : 3;
        this.o = 0;
        this.pos();
        //alert(o);
    }
    inits.prototype = {
        pos: function() {
            clearInterval(this.__b);
            this.o = 0;
            var el = H$(this.id), li = H$$('li', el), l = li.length;
            var _t = li[l - 1].offsetHeight;
            var cl = li[l - 1].cloneNode(true);
            cl.style.opacity = 0; cl.style.filter = 'alpha(opacity=0)';
            el.insertBefore(cl, el.firstChild);
            el.style.top = -_t + 'px';
            this.anim();
        },
        anim: function() {
            var _this = this;
            this.__a = setInterval(function() { _this.animH() }, 20);
        },
        animH: function() {
            var _t = parseInt(H$(this.id).style.top), _this = this;
            if (_t >= -1) {
                clearInterval(this.__a);
                H$(this.id).style.top = 0;
                var list = H$$('li', H$(this.id));
                H$(this.id).removeChild(list[list.length - 1]);
                this.__c = setInterval(function() { _this.animO() }, 20);
                //this.auto();
            } else {
                var __t = Math.abs(_t) - Math.ceil(Math.abs(_t) * .07);
                H$(this.id).style.top = -__t + 'px';
            }
        },
        animO: function() {
            this.o += 2;
            if (this.o == 100) {
                clearInterval(this.__c);
                H$$('li', H$(this.id))[0].style.opacity = 1;
                H$$('li', H$(this.id))[0].style.filter = 'alpha(opacity=100)';
                this.auto();
            } else {
                H$$('li', H$(this.id))[0].style.opacity = this.o / 100;
                H$$('li', H$(this.id))[0].style.filter = 'alpha(opacity=' + this.o + ')';
            }
        },
        auto: function() {
            var _this = this;
            this.__b = setInterval(function() { _this.pos() }, this.at * 1000);
        }
    }
    return inits;
} ();

JS滑动效果：

function fun_slider(slider) {
    var scrtime;
    $("#" + slider).hover(function() {
        clearInterval(scrtime);
    }, function() {
        scrtime = setInterval(function() {
            var $ul = $("#" + slider);
            var liHeight = $ul.find("li:last").height();
            $ul.animate({ marginTop: liHeight + "px" }, 1000, function() {
                $ul.find("li:last").prependTo($ul)
                $ul.find("li:first").hide();
                $ul.css({ marginTop: 0 });
                $ul.find("li:first").fadeIn(1000);
            });
        }, 5000);
    }).trigger("mouseleave");
}
$(function() {
fun_slider("WOM_slider");
fun_slider("WEIBO_slider");
fun_slider("PolicyAndAttention_slider");
});

HTML:

                    <!-- list Start -->
                    <div class="wp_SLIP">
                    <asp:Repeater ID="rp_PolicyAndAttention" runat="server">
                        <HeaderTemplate>
                            <ul class="list" id="PolicyAndAttention_slider"> 
                       </HeaderTemplate>
                        <ItemTemplate>
                            <li>
                        	<h2>
                            	<a href="<%# Eval("PageURL")%>" target="_blank" title=""><%# Eval("PageTitle")%></a>
                            </h2>
                            <div class="info">
                            	ID：<%# Eval("PageID")%>  <%# DataBinder.Eval(Container.DataItem, "PagePostTime", "{0:yyyy-MM-dd}")%>  <%# Eval("PageDomainNetName")%>  关键词：<a href="#">管理哲学</a>  <a href="#">张瑞敏</a>  <a href="#">宝洁</a>
                            </div>
                            <div class="briefly">
                            	      <%# HandlerContent(Eval("PageContent").ToString())%>
                            </div>
                            <div class="tools">
                            	<div class="fl">
                                	<img src="images/lgreenCircle.gif" />
                                    <img src="images/lgreenCircle.gif" />
                                    <img src="images/lgreenCircle.gif" />
                                    <img src="images/lgreenCircle.gif" />
                                    <img src="images/grayCircle.gif" />
                                </div>
                                <div class="fr">
                                    <a href="#" class="t1">阅读原文</a>
                                    <a href="#" class="t2">评论(1)</a>
                                    <a href="#" class="t3">收藏</a>
                                    <a href="#" class="t4">分享</a>
                                    <a href="#" class="t5">置顶</a>
                                    <a href="#" class="t6">闭环处理</a>
                                </div>
                            </div>
                        </li>
                        </ItemTemplate>
                        <FooterTemplate>
                            </ul>
                        </FooterTemplate>
                        </asp:Repeater>
                    </div>
                    <!-- list End -->