I have Some Queries Related to Marquee in HTML
1.First i have created a Simply Marquee that movies in Direction Upwards
2.Marquee Contents are Entered in List.
3.Every List should stop for 1 Sec in Staring Position
Is there any way to Solve This Issues
Here is the Picture For Your clarification
I have worked with div as marquee is not cross-browser.
i have also added <div id="cont"></div> to show that even if has something on top it will still work.
code for stooping Every List should stop for 1 Sec in Staring Position
Working Demo http://jsfiddle.net/4yYsu/2/
<div id="cont"></div>
<div id="container">
<ul id="mytext">
<li>this is a simple text to test custom marquee</li>
<li>this is a simple text</li>
<li>test custom marquee</li>
</ul>
</div>
#cont {
height:200px;
width:200px;
}
#container {
display: inline-block;
overflow: hidden;
width: auto;
position:absolute;
}
#mytext {
display: inline-block;
position: relative;
margin-left:10px;
margin-bottom:10px;
}
txt = $("#mytext");
length = $("#mytext li").length;
height_ul = parseInt(txt.height());
height_li = parseInt(txt.height()) / length;
delta = 0;
run();
function run() {
delta = (delta - height_li < -1 * height_ul) ? height_ul : delta - height_li;
if (delta <= 0) {
scroll_li(delta);
} else if (delta = height_ul) {
txt.animate({
top: delta
}, 0, "linear");
delta = 0;
scroll_li(delta);
}
setTimeout(run, 1000);
}
function scroll_li(delta) {
txt.animate({
top: delta
}, 2000, "linear").delay(1000);
}
previous code
Working Demo http://jsfiddle.net/cse_tushar/4yYsu/
HTML
<div id="cont"></div>
<div id="container">
<ul id="mytext">
<li>this is a simple text to test custom marquee</li>
<li>this is a simple text</li>
<li>test custom marquee</li>
</ul>
</div>
CSS
#cont {
height:200px;
width:200px;
}
#container {
display: inline-block;
overflow: hidden;
width: auto;
position:absolute;
}
#mytext {
display: inline-block;
position: relative;
margin-left:10px;
margin-bottom:10px;
}
js
$(function () {
var txt = $("#mytext");
txt.bind('scroll', function () {
var el = $(this);
// Scroll state machine
var scrollState = el.data("scrollState") || 0;
el.data("scrollState", (scrollState + 1) % 4);
switch (scrollState) {
case 0:
// initial wait
el.css({
top: 0
});
el.show();
window.setTimeout(function () {
el.trigger("scroll");
}, 1000);
break;
case 1:
// start scroll
var delta = 0 - parseInt(el.height());
if (delta < 0) {
el.animate({
top: delta
}, 2000, "linear", function () {
el.trigger("scroll");
});
delta = -1 * parseInt(delta) + 'px';
el.animate({
top: delta
}, 0, "linear", function () {
el.trigger("scroll");
});
el.animate({
top: 0
}, 2000, "linear", function () {
el.trigger("scroll");
});
}
break;
}
}).trigger("scroll");
});
此解决方案的确切正确答案由Lister 先生给出，请参阅获取解决方案的评论
该问题的解决方案如下。
这是工作代码..
HTML
<div class="container">
<ul>
<li> this is a simple text to test custom marquee</li>
<li> this is a simple text </li>
<li> test custom marquee </li>
</ul>
</div>
JavaScript：
var top = 8; run();
function run()
{
var ul = document.getElementsByTagName('ul')[0];
var time = 2000;
if (top<-4) {
top = 8;
ul.style.transition = 'none';
time = 100;
}
else if (top>0) {
top = 0;
ul.style.transition = 'all 4s linear';
time = 5000;
}
else {
top -= 2;
ul.style.transition = 'all 1s linear';
}
ul.style.marginTop = ''+top+'em';
setTimeout(run, time);
}
CSS：
.container {height:8em; overflow:hidden}
ul {margin-top:8em;}
li {white-space:nowrap; line-height:2; margin-top:0;}
李斯特先生非常感谢您的快速回复，这正是我所需要的.. 再次感谢