嗨,我是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>
示例小提琴手,它在这里工作得很好 来到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 });
}
我无法理解选项参数,任何人都可以向我提出问题所在 在此先感谢
答案 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>