<script language="javascript">
$(document).ready(function($) {
var methods = {
init: function(options) {
this.children(':first').stop();
this.marquee('play');
},
play: function() {
var marquee = this,
pixelsPerSecond = 100,
firstChild = this.children(':first'),
totalHeight = 0,
difference,
duration;
// Find the total height of the children by adding each child's height:
this.children().each(function(index, element) {
totalHeight += $(element).innerHeight();
});
// The distance the divs have to travel to reach -1 * totalHeight:
difference = totalHeight + parseInt(firstChild.css('margin-top'), 10);
// The duration of the animation needed to get the correct speed:
duration = (difference/pixelsPerSecond) * 1000;
// Animate the first child's margin-top to -1 * totalHeight:
firstChild.animate(
{ 'margin-top': -1 * totalHeight },
duration,
'linear',
function() {
// Move the first child back down (below the container):
firstChild.css('margin-top', marquee.innerHeight());
// Restart whole process... :)
marquee.marquee('play');
}
);
},
pause: function() {
this.children(':first').stop();
}
};
$.fn.marquee = function(method) {
// Method calling logic
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.marquee');
}
};
})(jQuery);
var marquee = $('#marquee');
marquee.marquee();
marquee.hover(function() {
marquee.marquee('pause');
}, function() {
marquee.marquee('play');
});
</script>
<style type="text/css">
#marquee {
margin:inherit;
width:auto;
height:inherit
}
</style>
我想使用 jquery 创建一个滚动条，但我失败了。上面的代码是我用来向上滚动元素的选取框。我正在使用它，如下所示，
<html>
<body>
<div class="content">
<div id="marquee">
<ul>
<li>...</li>
....
</ul>
</div>
</div></body>
</html>
但它根本不滚动，我使用的代码中是否有不正确的地方你可以帮我找到吗？
最佳答案
不确定 margin-top 是否适用于此。 尝试使用 position:relative 作为 holder block(marquee) 和 position:absolute 作为内容 (ul)。并更新顶部而不是边距顶部。但在这种情况下，您可能需要为选取框 div 指定高度和溢出:隐藏。另一种选择是为选取框设置高度和 oveflow:hidden，但保留默认位置。并使用 scrollTop 滚动内容或一些类似的 jquery 函数。
关于javascript - 使用 jquery 滚动 Pane ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12051751/