向上
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>连续向上滚动</title>
<style type="text/css">
<!--
body {
font-size: 9pt;
color: #000000;
}
a {
color: #0000FF;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
-->
</style>
</head>
<body>
<div id="marquees"> <a href="#">链接一</a><br>
<br>
<a href="#">链接二</a><br>
<br>
<a href="#">链接三</a><br>
<br>
<a href="#">链接四</a><br>
<br>
</div>
<script language="JavaScript">
marqueesHeight=200;
stopscroll=false;
with(marquees){
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
preTop=0; currentTop=0;
function init(){
templayer.innerHTML="";
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
setInterval("scrollUp()",100);
}
document.body.onload=init;
function scrollUp(){
if(stopscroll==true) return;
preTop=marquees.scrollTop;
marquees.scrollTop+=1;
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
marquees.scrollTop+=1;
}
}
</script>
</body>
</html>
向下
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>连续向下滚动</title>
<style type="text/css">
<!--
body {
font-size: 9pt;
color: #000000;
}
a {
color: #0000FF;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
-->
</style>
</head>
<body>
<div id="marquees"> <a href="#">链接一</a><br>
<br>
<a href="#">链接二</a><br>
<br>
<a href="#">链接三</a><br>
<br>
<a href="#">链接四</a><br>
<br>
</div>
<script language="JavaScript">
marqueesHeight=200;
with(marquees){
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
preTop=0; currentTop=0;getlimit=0;stopscroll=false;
function init(){
templayer.innerHTML="";
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML+=templayer.innerHTML;
setInterval("scrollDown()",10);
}init();
function scrollDown(){
if(stopscroll==true) return;
preTop=marquees.scrollTop;
marquees.scrollTop-=1;
if(preTop==marquees.scrollTop){
if(!getlimit){
marquees.scrollTop=templayer.offsetHeight*2;
getlimit=marquees.scrollTop;
}
marquees.scrollTop=getlimit-templayer.offsetHeight+marqueesHeight;
marquees.scrollTop-=1;
}
}
</script>
</body>
</html>
向左
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>连续向左滚动</title>
<style type="text/css">
<!--
body {
font-size: 9pt;
color: #000000;
}
a {
color: #0000FF;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
-->
</style>
</head>
<body>
<div id="marquees"> <a href="#">链接一</a> <a href="#">链接二</a> <a href="#">链接三</a> <a href="#">链接四</a> </div>
<div id="templayer" style="position:absolute;left:0;top:0;visibility:hidden"></div>
<script language="JavaScript">
marqueesWidth=200;
with(marquees){
style.height=0;
style.width=marqueesWidth;
style.overflowX="hidden";
style.overflowY="visible";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
preLeft=0; currentLeft=0; stopscroll=false;
function init(){
templayer.innerHTML="";
while(templayer.offsetWidth<marqueesWidth){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML+=templayer.innerHTML;
setInterval("scrollLeft()",100);
}init();
function scrollLeft(){
if(stopscroll==true) return;
preLeft=marquees.scrollLeft;
marquees.scrollLeft+=1;
if(preLeft==marquees.scrollLeft){
marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1;
}
}
</script>
</body>
</html>
向右
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>连续向右滚动</title>
<style type="text/css">
<!--
body {
font-size: 9pt;
color: #000000;
}
a {
color: #0000FF;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
-->
</style>
</head>
<body>
<div id="marquees"> <a href="#">链接一</a> <a href="#">链接二</a> <a href="#">链接三</a> <a href="#">链接四</a> </div>
<div id="templayer" style="position:absolute;left:0;top:0;visibility:hidden"></div>
<script language="JavaScript">
marqueesWidth=200;
with(marquees){
style.height=0;
style.width=marqueesWidth;
style.overflowX="hidden";
style.overflowY="visible";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
preTop=0; currentTop=0; getlimit=0; stopscroll=false;
function init(){
templayer.innerHTML="";
while(templayer.offsetWidth<marqueesWidth){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML+=templayer.innerHTML;
setInterval("scrollRight()",10);
}init();
function scrollRight(){
if(stopscroll==true) return;
preLeft=marquees.scrollLeft;
marquees.scrollLeft-=1;
if(preLeft==marquees.scrollLeft){
if(!getlimit){
marquees.scrollLeft=templayer.offsetWidth*2;
getlimit=marquees.scrollLeft;
}
marquees.scrollLeft=getlimit-templayer.offsetWidth+marqueesWidth;
marquees.scrollLeft-=1;
}
}
</script>
</body>
</html>
您可能感兴趣的文章:
- CSS3中Transition属性详解以及示例分享
- filters.revealTrans.Transition使用方法小结
- 全面解析Bootstrap中transition、affix的使用方法
- 实例讲解iOS中的CATransition转场动画使用
- JS实现动画兼容性的transition和transform实例分析
- jQuery+css3实现文字跟随鼠标的上下抖动
- js实现的文字横向无间断滚动
- 浅析js 文字滚动效果
- 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
- 利用transition实现文字上下抖动的效果
