Asp.net marquee与js实现滚动效果
来源：互联网 发布：领航网络电商有限公司 编辑：程序博客网 时间：2024/06/10 06:36
1、HTML---marquee
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>滚动练习</title>
</head>
<body>
<marquee direction="up" scrollamount="5" behavior="scroll" width="190" height="140" onmouseover="this.stop()" onmouseout="this.start()" >
<p><h2><a href="Click'>http://www.baidu.com">Click to Baidu </a></h2>
<p><h2><a href="Click'>http://www.baidu.com">Click to Baidu </a></h2>
<p><h2><a href="Click'>http://www.baidu.com">Click to Baidu </a></h2>
<p><h2><a href="Click'>http://www.baidu.com">Click to Baidu </a></h2>
<p><h2><a href="Click'>http://www.baidu.com">Click to Baidu </a></h2>
</marquee>
</body>
</html>
marquee参数：
BGColor：滚动文本框的背景颜色。
Direction：滚动方向设置，可选择Left、Right、up和down。
scrolldelay：每轮滚动之间的延迟时间，越大越慢。
scrollamount：一次滚动总的时间量，数字越小滚动越慢。
Behaviour：滚动方式设置，Scroll（循环滚动）lide（单次滚动）、Alternate（来回滚动）。
Align：文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。
Width：滚动文本框的宽度，输入一个数值后从后面的单选框选择in Pixels(按像素)或in Percent(按百分比)。
Height：滚动文本框的高度，输入一个数值后从后面的单选框选择in Pixels(按像素)或in Percent(按百分比)。
loop：滚动次数。默认为infinite
hspace、vspace：前后、上下的空行。
2、js实现滚动效果
<style type="text/css">
<!-- 首先定义好css样式：
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>
向上滚动
<div id="demo">
<div id="demo1">
<a href="#"><img src="#" border="0" /></a>
<a href="#"><img src="#" border="0" /></a>
<a href="#"><img src="#" border="0" /></a>
<a href="#"><img src="#" border="0" /></a>
<a href="#"><img src="#" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementByIdx_x("demo");
var tab1=document.getElementByIdx_x("demo1");
var tab2=document.getElementByIdx_x("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
function Marquee(){
if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
else{
tab.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>
------------------------------------------------------------
图片向下无缝滚动只需要改变一下js代码即可
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementByIdx_x("demo");
var tab1=document.getElementByIdx_x("demo1");
var tab2=document.getElementByIdx_x("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
tab.scrollTop=tab.scrollHeight
function Marquee(){
if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时
tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端
else{
tab.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>
上面两段js代码一对比，看出端倪来了吗？原来就是一个运算的问题。tab.scrollTop+=tab2.offsetHeight ； tab.scrollTop++ 这个是向上，tab.scrollTop-=tab2.offsetHeight ； tab.scrollTop-- 这个是乡下。
*****************************************************************************************************
图片向左无缝滚动
<style type="text/css">
<!--
#demo {
background: #FFF;overflow:hidden;border: 1px dashed #CCC;width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;