尝试创建自定义jQuery文本滚轮
Trying to create custom jQuery text-scroller
我想做一个自己的自定义js-text-scroller(我希望文本在div内向左滚动,然后一次又一次地重复滚动)。
但是我有一些问题。我真的不能指出我哪里做错了,或者哪里需要新的功能。所有我能得到的帮助都是受欢迎的。
这里有一个简单的例子:http://jsfiddle.net/Na373/
HTML:<div class="wrap">
<div class="scroll">
<ul class="active">
<li>Hello World</li>
<li>Hello World</li>
<li>Hello World</li>
<li>Hello World</li>
<li>Hello World</li>
<li>Hello World</li>
<li>Hello World</li>
<li>Hello World</li>
<li>Hello World</li>
<li>Hello World</li>
</ul>
</div>
JS:
$ul = $('.scroll ul');
//copys the existing ul and appends it after the existing one
$('.scroll').append($ul.clone().removeClass().addClass('not_active'));
function scroll() {
$active = $('.scroll ul.active');
$active.each(function() {
$not_active = $('.scroll ul.not_active');
// foreach time the function runs the ul goes "left: -1px;"
var current_position = parseInt($(this).css('left'));
var new_position = current_position - 1;
$(this).css('left', new_position+'px');
var parent_width = $(this).parent().outerWidth(); // gets the width of ".scroll"
var width = $(this).outerWidth(); // gets the width of the "ul"
var shown_all = current_position + width;
// if the right corner of the "ul" are att the right corner of ".scroll"
// this if statement executes and adds new existing class on the "ul.not_active"
// and adds class ".active" instead
// this means that there are 2 ul with the class active
//running simultaneously
if (shown_all == parent_width) {
$not_active.removeClass().addClass('active');
}
// here it checks if the "ul.active" have past its own length to left
// Here im trying to make it "not_active" and put it after the existing ".active"
//
// <ul class="active">....</ul> ----> <ul class="not_active">...</ul>
//
// then put it after the other "ul.active"
//
// <ul class="active
// ---------> <ul class="not_active"></ul>
//
// So it all beginns from the beginning
if (current_position == '-'+width) {
$(this).removeClass().addClass('not_active').css('left', '0');
$(this).insertAfter($('.scroll ul').next());
}
});
};
// And here I run the function
setInterval(scroll, 10);
CSS: .wrap {
position: relative;
padding: 10px 10px 10px;
height: 18px;
background: #000;
color: #fff;
overflow: hidden;
width: 500px;
}
.scroll {
width: 500px;
white-space: nowrap;
}
.scroll ul {
left: 0;
position: relative;
margin: 0;
padding: 0;
display: inline;
list-style: none;
}
.scroll ul li {
padding: 0;
margin: 0;
display: inline;
}
我想你的问题是下面if语句中的条件
if (shown_all == parent_width) {
据我所知,shown_all = current_position + width
意味着shown_all
将从0 +宽度ul开始,并将结束于0。在当前代码中,if语句永远不会为真。
如果您将if语句更改为if (shown_all == 0)
或更改将变量shown_all
设置为var shown_all = -current_position + width;
的方式,我认为您会看到更好的结果。
我现在有一个工作的例子:http://jsfiddle.net/s8TnL/
欢迎所有回复。我很高兴收到关于性能和功能的回复。
HTML:<div class="wrap">
<div class="scroll">
<ul class="active">
<li>Hello World</li>
<li>Hello World</li>
<li>Hello World</li>
<li>Hello World</li>
<li>Hello World</li>
<li>Hello World</li>
<li>Hello World</li>
</ul>
</div>
CSS: .wrap {
position: relative;
padding: 10px 10px 10px;
height: 18px;
background: #0BF397;
color: #fff;
overflow: hidden;
width: 500px
}
.scroll {
display: block;
white-space: nowrap;
}
.scroll ul {
position: relative;
margin: 0;
padding: 0;
display: inline;
list-style: none;
}
.scroll ul li {
padding: 0;
margin: 0;
display: inline;
}
JS:
$ul = $('.scroll ul');
$('.scroll').append($ul.clone().removeClass().addClass('not_active'));
$ul.hover(function () {
clearInterval(activate);
}, function () {
activate = setInterval(scroll, 10);
});
function scroll() {
$active = $('.scroll ul.active');
$active.each(function () {
$not_active = $('.scroll ul.not_active');
var offset = $(this).offset();
var current_position = offset.left;
var new_position = current_position - 1;
$(this).offset({
left: new_position
});
var parent_width = $(this).parent().outerWidth();
var width = $(this).outerWidth();
var shown_all = current_position + width;
if (shown_all == parent_width) {
$not_active.removeClass().addClass('active').offset({
left: parent_width
});
}
if (current_position == '-' + width) {
$(this).removeClass().addClass('not_active');
}
});
};
activate = setInterval(scroll, 10);
相关文章:
- 基于文本jquery php更改按钮
- 选择“p文本jquery”
- 附加 HTML 转义文本:jQuery
- 如何知道选中/突出显示的文本jquery的顺序出现
- Action.on('模糊')不't处理输入文本-jQuery 1.9+
- 在当前工具提示文本 JQuery 旁边追加或添加新文本
- 文本自动移动以适应动画相邻文本 (jquery):如何平滑
- 获取锚点的特定文本 - jQuery
- 从文本 jquery 中查找和挑选出模式
- 延迟后如何更改文本 - jQuery.
- 更改按钮文本 jQuery
- 使用 :包含 找到一个文本 jquery
- 获取引导程序单选按钮文本-jquery
- onchange函数转换为输入文本JQuery的数组
- 语法错误未终止字符串文本jquery
- 将输入占位符文本与span文本jquery交换
- 更改数值为文本- jQuery / NivoSlider
- 在文本区搜索指定的文本- jQuery/Javascript
- 一个字一个字地突出显示文本(jquery)(关闭)
- 无终止字符串文本jquery或更多