Question

我使用 JavaScript 来显示新闻的批量我很好地完成了我的代码，一切正常，但我需要从左到右显示新闻。我使用jQuery文件liScroll。

aspx页面

 <ul id="ticker02" >
                        <asp:DataList ID="DLQ" runat="server" RepeatColumns="10" >
                            <ItemTemplate>
                                <li><span>...</span><a href='<%#Eval("Art_ID","NewsDetailsPage.aspx?ID="+ Eval("Art_ID"))%>'>
                                    <%# Eval("Title")%></a></li>
                            </ItemTemplate>
                        </asp:DataList>
                    </ul>

JavaScript代码

 <script type="text/javascript">
    $(function () {
        $("ul#ticker02").liScroll({ travelocity: 0.05 });

    });
</script>

JQuery文件：

jQuery.fn.liScroll = function (settings) {
settings = jQuery.extend({
    travelocity: 0.20
}, settings);
return this.each(function () {
    var $strip = jQuery(this);
    $strip.addClass("newsticker")
    var stripWidth = 1;
    $strip.find("li").each(function (i) {
        stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
    });
    var $mask = $strip.wrap("<div class='mask'></div>");
    var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
    var containerWidth = $strip.parent().parent().width();  //a.k.a. 'mask' width   
    $strip.width(stripWidth);
    var totalTravel = stripWidth + containerWidth;
    var defTiming = totalTravel / settings.travelocity; // thanks to Scott Waye     
    function scrollnews(spazio, tempo) {
        $strip.animate({ left: '-=' + spazio }, tempo, "linear", function () { $strip.css("left", containerWidth); scrollnews(totalTravel, defTiming); });
    }
    scrollnews(totalTravel, defTiming);
    $strip.hover(function () {
        jQuery(this).stop();
    },
    function () {
        var offset = jQuery(this).offset();
        var residualSpace = offset.left + stripWidth;
        var residualTime = residualSpace / settings.travelocity;
        scrollnews(residualSpace, residualTime);
    });
});

Answer 1

添加<li class="classname">

然后

使用此：

jQuery.fn.liScroll = function (settings) {
settings = jQuery.extend({
    travelocity: 0.20
}, settings);
return this.each(function () {
    var $strip = jQuery(this);
    $strip.addClass("newsticker")
    var stripWidth = 1;      
    $strip.find('.classname').each(function (i) { <-- Change Here
        stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
    });
    var $mask = $strip.wrap("<div class='mask'></div>");
    var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
    var containerWidth = $strip.parent().parent().width();  //a.k.a. 'mask' width   
    $strip.width(stripWidth);
    var totalTravel = stripWidth + containerWidth;
    var defTiming = totalTravel / settings.travelocity; // thanks to Scott Waye     
    function scrollnews(spazio, tempo) {
        $strip.animate({ left: '-=' + spazio }, tempo, "linear", function () { $strip.css("left", containerWidth); scrollnews(totalTravel, defTiming); });
    }
    scrollnews(totalTravel, defTiming);
    $strip.hover(function () {
        jQuery(this).stop();
    },
    function () {
        var offset = jQuery(this).offset();
        var residualSpace = offset.left + stripWidth;
        var residualTime = residualSpace / settings.travelocity;
        scrollnews(residualSpace, residualTime);
    });
});

如何使用liScroll JQuery？

1 个答案: