Div+css+javascript to achieve seamless scrolling, marquee seamless scrolling, seamless scrolling, compatible with Firefox
Using marquee to achieve the end-end connected cycle scrolling effect (ie only):
Copy Code code as follows:
<marquee behavior= "Scroll" contenteditable= "true" onstart= "this.firstchild.innerhtml+=" This.firstChild.innerHTML "scrollamount=" 3 "width=" "onmouseover=" This.stop (); "onmouseout=" This.start (); " >
Here is the content to scroll
</marquee>
Using Div+css+javascript to achieve the end to end connected cycle scrolling effect (compatible with Firefox):
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>div+css+javascript to achieve seamless scrolling, marquee seamless scrolling, seamless scrolling, compatible firefox</title>
<style type= "Text/css" >
#scrollobj {
White-space:nowrap;
Overflow:hidden;
width:500px;
}
</style>
<body>
<div id= "Scrollobj" onmouseover= "javascript:_stop ();" onmouseout= "Javascript:_start ();" >
Here is the content to scroll
</div>
<script language= "javascript" type= "Text/javascript" >
<!--
function Scroll (obj) {
* * to Left/*
var tmp = (obj.scrollleft) + +;
When the scroll bar reaches the right top
if (Obj.scrollleft = = tmp) {
obj.innerhtml + = obj.innerhtml;
}
When the scroll bar scrolls the width of the initial content, the scroll bar returns to the left end
if (obj.scrollleft >= obj.firstChild.offsetWidth) {
Obj.scrollleft = 0;
}
/* go up/*
var tmp = (obj.scrolltop) + +;
if (obj.scrolltop = = tmp) {
obj.innerhtml + = obj.innerhtml;
//}
if (obj.scrolltop >= obj.firstChild.offsetWidth) {
obj.scrolltop = 0;
//}
}
var _timer = setinterval ("Scroll (document.getElementById (' scrollobj ')", 20);
function _stop () {
if (_timer!= null) {
Clearinterval (_timer);
}
}
function _start () {
_timer = SetInterval ("_scroll (document.getElementById (' scrollobj ')"), 20);
}
-->
</script>
</body>
