你的位置:| 首页网站建设asp滚动代码及参数详解→文章正文  
文章导航


asp滚动代码及参数详解

 

1.

图片滚动代码:
<div id="c_9">
<marquee direction="left" TrueSpeed scrollamount="1" scrolldelay="30" onMouseOver="this.stop();" onMouseOut="this.start();">
<img src="images/p_0/p_1.jpg" width="150" height="130" border="1" />
<img src="images/p_0/p_2.jpg" width="150" height="130" border="1" />
<img src="images/p_0/p_3.jpg" width="150" height="130" border="1" />
</marquee>
</div>
附:循环滚动基本语法
<marquee> ... </marquee>
移动属性的设置 ,这种移动不仅仅局限于文字,也可以应用于图片,表格等等

方向
<direction=#> #=left, right ,up ,down <marquee direction=left>从右向左移!</marquee>

方式:
<bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>不停的滚动</marquee>
<marquee behavior=slide>只滚动一次</marquee>
<marquee behavior=alternate>来回滚动</marquee>

循环 :
<loop=#> #=次数,若未指定则循环不止(infinite) <marquee loop=3 width=50% behavior=scroll>滚动三次</marquee> <P>
<marquee loop=3 width=50% behavior=slide>滚动三次</marquee>
<marquee loop=3 width=50% behavior=alternate>滚动三次</marquee>

速度:
<scrollamount=#> <marquee scrollamount=20>快速滚动</marquee>

延时:
<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>滚动一步,停一下</marquee>

外观(Layout)设置

对齐方式(Align)
<align=#> #=top, middle, bottom <font size=6>
<marquee align=# width=400>移动</marquee>
</font>

底色:
<bgcolor=#> #=rrggbb 16 进制数码,或者是下列预定义色彩:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>颜色</marquee>

面积:
<height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>滚动的高或宽度</marquee>

空白:
(Margins)<hspace=# vspace=#>
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>滚动的高度或宽度</marquee>

2.

<marquee>标签是很方便,但要实现不间断的滚动确比较麻烦.
offsetWidth是指物体可见宽度
scrollLeft是指滚动滑块在滚动条上的位置
<!--对于此例,网页中一般会有三个容器,此处为demo,demo1和demo2;其中demo1和demo2均在demo中
demo的overflow属性一般为hidden,我在这里用auto是为了方便你查看scrollLeft的状态,
另外为方便你理解scrollLeft和offsetWidth,我还在后面加了一个viewstatus函数,鼠标经过容器时会看到相关参数值
//-->
<div id=demo style="width:200;overflow:auto">
<table><tr>
<td id=demo1>
<img src='a.gif' width=100><img src='b.gif' width=100></td>
<td id=demo2></td>
</tr></table>
</div>
<script>
var speed=30 //定义速度,实指下面滚动函数的执行间隔,值越小滚动越快
demo2.innerHTML=demo1.innerHTML //将demo1中的内容复制到demo2
function Marquee(){ //开始定义滚动函数
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth //如果滑动块的位置大于demo2的宽度,滑动块退回一个demo2的宽度
else{
demo.scrollLeft++ //否则,滑动块向右滚动(图片向左滚)
}
}//滚动函数定义完
var MyMar=setInterval(Marquee,speed) //设置定时器,使滚动函数每30毫秒运行一次
demo.onmouseover=function() {clearInterval(MyMar);viewstatus();}//鼠标经过时,清除定时器,停止执行滚动函数,弹出信息;
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}// 鼠标离开后,继续滚动
function viewstatus(){//这是我加的函数,很简单,不注释了
mess="demo.scrollLeft:"+demo.scrollLeft+"ndemo1.offsetWidth:"+demo1.offsetWidth+"ndemo2.offsetWidth:"+demo2.offsetWidth;
alert(mess);
}
</script>


另一个源文件:

<!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>
<div>
<div id=demo style="overflow:hidden; WIDTH: 204px; align:center">
<table cellspacing="0" cellpadding="0" align="center" border="0">
<tbody>
<tr>
<td id="marquePic1" valign="top">

<table width="660" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="66" align="center"><img src="image/likaifu.jpg" width="55" height="60"></td>
<td width="66" align="center"><img src="image/likaifu.jpg" width="55" height="60"></td>
<td width="66" align="center"><img src="image/likaifu.jpg" width="55" height="60"></td>
<td width="66" align="center"><img src="image/likaifu.jpg" width="55" height="60"></td>
<td width="66" align="center"><img src="image/likaifu.jpg" width="55" height="60"></td>
<td width="66" align="center"><img src="image/likaifu.jpg" width="55" height="60"></td>
<td width="66" align="center"><img src="image/likaifu.jpg" width="55" height="60"></td>
<td width="66" align="center"><img src="image/likaifu.jpg" width="55" height="60"></td>
<td width="66" align="center"><img src="image/likaifu.jpg" width="55" height="60"></td>
<td width="77" align="center"><img src="image/likaifu.jpg" width="55" height="60"></td>
</tr>
<tr>
<td height="5" align="center" >李开复</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center" bgcolor="#FFFF99">&nbsp;</td>
</tr>
</table>

</td>
<td id="marquePic2" valign="top"></td>
</tr>
</tbody>
</table>
</div>

<script type=text/javascript>
var speed=35 //定义速度,实指下面滚动函数的执行间隔,值越小滚动越快
marquePic2.innerHTML=marquePic1.innerHTML //将demo1中的内容复制到demo2
function Marquee(){ //开始定义滚动函数
if(demo.scrollLeft>=marquePic1.scrollWidth){ //如果滑动块的位置大于demo2的宽度,滑动块退回一个demo2的宽度
demo.scrollLeft=0
}else{ //否则,滑动块向右滚动(图片向左滚)
demo.scrollLeft++
}} //滚动函数定义完
var MyMar=setInterval(Marquee,speed) //设置定时器,使滚动函数每30毫秒运行一次
demo.onmouseover=function() {clearInterval(MyMar)} //鼠标经过时,清除定时器,停止执行滚动函数,弹出信息;
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} // 鼠标离开后,继续滚动
</script>
</div>
</body>
</html>

(varspeed=35 //定义速度,实指下面滚动函数的执行间隔,值越小滚动越快
下面加入:
var demo = document.getElementById("demo");
var marquePic1 = document.getElementById("marquePic1");
var marquePic2 = document.getElementById("marquePic2");
才能动!)

  上一页 1 2 3 4 5 下一页
 
公司简介 在线客服 客服中心 意见反馈 相关法律 隐私条款 广告服务 友情链接
Q链:515347638  电子邮箱:hanen@126.com 粤ICP备05086553