循环div内容Jquery中的Upwords(最新消息)收到错误

时间:2014-12-24 11:31:11

标签: jquery css asp.net

嗨,我是JQuery的新手,我有一些动态附加到div的内容,需要将该div内容滚动到顶部,并检查并发现它符合我的要求

这是我的HTML请看看

 <div class="news_container" id="NewsContent">
            <div class="LatestNews">
                <div class="Content">
                     with desktop publishing software like Aldus PageMaker            includingversions of Lorem
                    Ipsum.
                </div>
            </div>
        </div>

http://jsfiddle.net/x47Te/3/

示例小提琴手,它在这里工作得很好  来到asp.net页面它提出了错误

    "TypeError: jQuery.speed is not a function
optall = jQuery.speed( speed, easing, callback ),   
" 

我不知道我在这里使用animate()函数做错了什么错误

 function CreateFunction() {

            $.fn.loopScroll = function () {
                var options = $.extend({
                    direction: "upwards",
                    speed: 50
                });

                var obj = $(this).find(".LatestNews");
                var text_height = obj.find(".Content").height();
                var start_y, end_y;
                if (options.direction == "upwards") {
                    start_y = 0;
                    end_y = -text_height;
                }               
                var animate = function () {
                    //setup animation of "obj"
                    // calculate distance of animation    
                    var distance = Math.abs(end_y - parseInt(obj.css("top")));
                    //duration will be distance / speed

                    obj.animate({top: end_y }, 1000 * distance / options.speed,
                    //scroll upwards
                     function () {
                        // scroll to start position
                        obj.css("top", start_y);
                        animate();
                    });
                       animate();
                };
            $("#NewsContent").loopScroll({ speed: 120 });
        }

我无法理解选项参数,任何人都可以向我提出问题所在 在此先感谢

1 个答案:

答案 0 :(得分:1)

实际上你的问题是你的插件中没有扩展选项

$.fn.loopScroll = function (p_options) { // p_options missed
    var options = $.extend({
          direction: "upwards",
          speed: 50
      }, p_options);// extend p_options missed

你错过了$.fn.loopScroll =的结束,试试这个,

function CreateFunction() {
    $.fn.loopScroll = function (p_options) {
        var options = $.extend({
            direction: "upwards",
            speed: 50
        },p_options);

        var obj = $(this).find(".LatestNews");
        var text_height = obj.find(".Content").height();
        var start_y, end_y;
        if (options.direction == "upwards") {
            start_y = 0;
            end_y = -text_height;
        }
        var animate = function () {
            //setup animation of "obj"
            // calculate distance of animation    
            var distance = Math.abs(end_y - parseInt(obj.css("top")));
            //duration will be distance / speed

            obj.animate({
                top: end_y
            }, 1000 * distance / options.speed,
            //scroll upwards
            function () {
                // scroll to start position
                obj.css("top", start_y);
                animate();
            });

        };
    }// you've missed the closing brace
    $("#NewsContent").loopScroll({
       speed: 120
    });        
}

或者,你可以尝试一下,

<script src="path/to/jquery.js"></script>
<script>
    ;(function ($) {
        $.fn.loopScroll = function (p_options) { // get new options
            var options = $.extend({
                direction: "upwards",
                speed: 50
            }, p_options); // extend options
            var obj = $(this).find(".LatestNews");
            var text_height = obj.find(".Content").height();
            var start_y, end_y;
            if (options.direction == "upwards") {
                start_y = 0;
                end_y = -text_height;
            }

            var animate = function () {
                //setup animation of "obj"
                // calculate distance of animation    
                var distance = Math.abs(end_y - parseInt(obj.css("top")));
                //duration will be distance / speed

                obj.animate({
                    top: end_y
                }, 1000 * distance / options.speed,
                //scroll upwards
                function () {
                    // scroll to start position
                    obj.css("top", start_y);
                    animate();
                });

            };

            obj.find(".Content").clone().appendTo(obj);
            $(this).on("mouseover", function () {
                obj.stop();
            }).on("mouseout", function () {
                animate(); // resume animation
            });
            obj.css("top", start_y);

            animate(); // start animatio
        } // in your code you missed the closing braces.
    }(jQuery));

    function CreateFunction() {
         $("#NewsContent").loopScroll({ speed: 120 });
    }
</script>