Javascript 走马灯

yiminghe

浏览: 1460618 次
性别:
来自: 上海

最近访客更多访客>>

akingde

xmg25

xiaolan02

archerfrank

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript CSS IE Firefox HTML

第一种：String 直接操作

<HTML>
<Head>
<script>
var msg="这是一个足跑马灯效果的JAVASCRIPT文档"; //定义了要显示的效果的字符
var interval=100;                //定义了每个字符的显示间隔时间
var spacelen=100;                //定义字符串的最大长度
var space10="          ";
var seq=0;                    //定义字符启始位置
function Scroll(){                //定义滚动函数一
len=msg.length;                    //给LEN赋值为信息字符串的长度
window.status=msg.substring(0,seq+1);        //给WINDOW对象的STATUS对象赋值为从MSG字符对象中截取从0到第SEQ+1个字符
seq++;                        //递增SEQ以从MSG中截取更多的字符以实现跑马灯效果
if(seq>=len){                    //检查SEQ的值是否超过字符长度,如果是,则给SEQ赋值为SAPCELEN,使用SETTIMEOUT
seq=spacelen;                    //方法以INTERVAL为间隔调用SCROLL2;否则,使用SETTIMEOUT方法以INTERVAL为间隔
window.setTimeout("Scroll2();",interval);    //调用SCROLL
}
else
window.setTimeout("Scroll();",interval);
}
function Scroll2(){                //定义滚动函数2
var ut="";  
var out='';                 
for(var i=1;i<=(spacelen/space10.length);i++)     //使用循环产生SPACELEN个空格
    out+=space10;                //给OUT赋值为120个空格

out=out+msg;                    //给OUT加上要输出的字符
len=out.length;                    //求出OUT的长度
window.status=out.substring(seq,len);        //给WINDOW的STATUS对象赋值为从OUT字符串中截取从第SEQ个字符到LEN个
seq++;                        //让SEQ递增   
if(seq>=len){seq=0;}                //判断SEQ是否大于LEN,如果是,那么SEQ赋值为0
window.setTimeout("Scroll2();",interval)    //使用WINDOW的SETTIMEOUT方法来以INTERVAL为间隔调用SCROLL2

}
Scroll();                    //调用SCROLL

</script>
</Head>


</html>

<html>
<div id="marquees"> <!-- 这些是字幕的内容，你可以任意定义 --> <a href="#">链接1</a>
<br> <a href="#">链接2</a>
<br> <a href="#">链接3</a>
<br> <a href="#">链接4</a>
<br> <!-- 字幕内容结束 -->
</div>
</html>
<!-- 以下是javascript代码 -->
<script language="javascript">
<!--
marqueesHeight=200; //内容区高度
stopscroll=false; //这个变量控制是否停止滚动
with(marquees){
noWrap=true; //这句表内容区不自动换行
style.width=0; //于是我们可以将它的宽度设为0，因为它会被撑大
style.height=marqueesHeight;
style.overflowY="hidden"; //滚动条不可见
onmouseover=new Function("stopscroll=true"); //鼠标经过，停止滚动
onmouseout=new Function("stopscroll=false"); //鼠标离开，开始滚动
}
//这时候，内容区的高度是无法读取了。下面输出一个不可见的层"templayer"，稍后将内容复制到里面：
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
function init(){ //初始化滚动内容
//多次复制原内容到"templayer"，直到"templayer"的高度大于内容区高度：
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} //把"templayer"的内容的“两倍”复制回原内容区：
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//设置连续超时，调用"scrollUp()"函数驱动滚动条：
setInterval("scrollUp()",20);
}
document.body.onload=init;
preTop=0; //这个变量用于判断滚动条是否已经到了尽头
function scrollUp(){ //滚动条的驱动函数
if(stopscroll==true) return; //如果变量"stopscroll"为真，则停止滚动
preTop=marquees.scrollTop; //记录滚动前的滚动条位置
marquees.scrollTop+=1; //滚动条向下移动一个像素
//如果滚动条不动了，则向上滚动到和当前画面一样的位置
//当然不仅如此，同样还要向下滚动一个像素(+1)：
if(preTop==marquees.scrollTop){
	alert(1);
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</script>

scroll

  <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()",10);  
  }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>

获取大小的属性有

CSS ( 大小 +border) 属性对应的 offset 长宽属性（无标准的实事标准）：
1. offsetWidth
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。
与 CSS width + border 对应
2. offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
与 CSS height + border 对应
CSS ( 大小 -padding ) 属性对应的 client 长宽属性（无标准的实事标准）：
3. clientWidth
获取对象的宽度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。
与 CSS width - 滚动条宽度 ( 如果有 )
对应
4. clientHeight
获取对象的高度，不计算任何边距 (margin) 、边框、滚动条或可能应用到该对象的补白 (padding) 。
与 CSS height - 滚动条宽度 ( 如果有 )
对应

获取位置信息的属性有：
几个 offset 属性（无标准的实事标准）：
offset 坐标 0 点是 offsetParent 元素 content 区域的左上点
5. offsetParent
获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。
CSS persition = absolute 时， left,top 属性值参照的元素。
Object is positioned relative to parent element's position—or to the body object if its parent element is not positioned—using the top and left properties.
6. offsetLeft
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
与 CSS left( absolute )+margin 对应
7. offsetTop
获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。
与 CSS top(absolute)+margin 对应

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中，FireFox差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height

查看图片附件

分享到：

两列布局的自动宽度以及DIV水平居中 | Cross Iframe Trick：the Old New Thing

2008-10-19 23:11
浏览 6513
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论