滚动文字、图片效果代码

15
Mar
2010

滚动文字、图片效果代码

滚动代码网上一搜会有很多，但是有的不兼容，有的甚至根本不能用，下面的这套方法是经我多次在项目中运用的过的，也是对网上代码的一个精简，兼容性良好。

下面给大家介绍：向上滚动文字，向左滚动图片+文字两种效果
因为我个人认为这两种效果是最常应用的了，所以选择这两个应介绍给大家。

知识准备：
*对scollTop,scollLeft,offsetHeight,offsetWidth的理解
offsetHeight：元素的实际内容高度。
offsetWidth:

元素实际内容的宽度。
scollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
前两个，我没有贴专业解释的描述，因为它们其实就是指元素的高度height，宽度width而已。
至于为什么js代码中没有用style.height这样的东西来替代，那时因为它们的单位不一样，所以不能放到一起运算，其实，它们没单位，而 style.height这样的是有单位的。只要知道它们的值是一样的就行了。
后两个，我贴的是大多数给这两个名词的专业解释，但是一般人很难理解，我也难以用常识性的语言去说明白，所以下面会贴张效果图解释下。

向左滚动原理：1.将marquee1的内容复制到marquee2中，
2.marquee.scollLeft++,造成marquee1+marquee2向左滚动。
3.当滚动至：marquee1的右边界和marquee左边界相交时，即当 marquee.scrollLeft=marquee1.offsetWidth时,
4.恢复初始状态，即marquee.scrollLeft=0。
5.跳至第2步

向上滚动原理：1.将marquee1的内容复制到marquee2中，
2.marquee.scollTop++,造成marquee1+marquee2向上滚动。
3.当滚动至：marquee1的下边界和marquee上边界相交时，即当 marquee.scrollTop=marquee1.offsetHeight时,
4.恢复初始状态，即marquee.scrollTop=0。
5.跳至第2步

再说明一些东西：
向上滚动的html结构性良好，但是向左滚动的html就不得不用table组织了。
这是为什么呢？因为只有table的系列元素能“自然”的不受容器限制，排在同一行上，能很好的配合这里的脚本运行。

下面贴出主要的代码：
第一个是向上滚动的文字效果代码。
第二个是向做滚左的图片+文字效果代码。

第一个：向上滚动的文字

CSS:
#demo { width:150px; overflow:hidden; height: 200px; } HTML 结构:

 <div id="demo">

<div  id="demo1">

<ul>

<li>

标题:<a  href="#">第一篇文章标题</a></li>

<li>

标题:<a href="#">第二篇文章标题</a></li>

<li>

标题:<a href="#">第三篇文章标题</a></li>

<li>

标题:<a href="#">第四篇文章标题</a></li>

<li>

标题:<a href="#">第五篇文章标题</a></li>

<li>

标题:<a href="#">第六篇文章标题</a></li>

<li>

标题:<a href="#">第七篇文章标题</a></li>

<li>

标题:<a href="#">第八篇文章标题</a></li>

<li>

标题:<a href="#">第九篇文章标题</a></li>

</ul>

</div>

<div id="demo2">

&lt;/code&gt;</div>

</div>

<strong>JS脚本: </strong><br />

function Marquee(){ //滚动函数体
if(tab.scrollTop>=tab1.offsetHeight){//当demo1下边界的位置到达demo上边界时
tab.scrollTop=0; //恢复最原始的状态
}
else{
tab.scrollTop++; //继续滚啊滚啊
}
}

HTML 结构:

<div id="marquee">

<table>

<tbody>

<tr>

<td  id="marquee1">

<table>

<tbody>

<tr>

<td>

<a  href="book.html"><img alt="Twilight" src="image/1.jpg"   /></a> <a href="book.html">图片1</a></td>

<td>

<a href="book.html"><img  alt="Twilight" src="image/2.jpg"  /></a> <a  href="book.html">图片2</a></td>

<td>

<a href="book.html"><img alt="Twilight"  src="image/3.jpg"  /></a> <a  href="book.html">图片3</a></td>

<td>

<a href="book.html"><img alt="Twilight"  src="image/4.jpg"  /></a> <a  href="book.html">图片4</a></td>

<td>

<a href="book.html"><img alt="Twilight"  src="image/5.jpg"  /></a> <a  href="book.html">图片5</a></td>

<td>

<a href="book.html"><img alt="Twilight"  src="image/6.jpg"  /></a> <a  href="book.html">图片6</a></td>

<td>

<a href="book.html"><img alt="Twilight"  src="image/7.jpg"  /></a> <a  href="book.html">图片7</a></td>

<td>

<a href="book.html"><img alt="Twilight"  src="image/8.jpg"  /></a> <a  href="book.html">图片8</a></td>

<td>

<a href="book.html"><img alt="Twilight"  src="image/9.jpg"  /></a> <a  href="book.html">图片9</a></td>

</tr>

</tbody>

</table>

</td>

<td id="marquee2">

&nbsp;</td>

</tr>

</tbody>

</table>

</div>

JS脚本:

 <SCRIPT  type="text/javascript">

var speed=10; //数字越大速度越慢

var  tab=document.getElementById("marquee");

var  tab1=document.getElementById("marquee1");

var  tab2=document.getElementById("marquee2");

tab2.innerHTML=tab1.innerHTML;          //克隆marquee1为marquee2

//向左滚动的 代码

function Marquee(){

if(tab.scrollLeft&gt;=tab1.offsetWidth)

tab.scrollLeft=0;

else

tab.scrollLeft++;

}

var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
</SCRIPT>

via:http://www.incollege.cn/node/45

Tags: 滚动文字
Posted in web design

滚动文字、图片效果代码

Leave a Reply

Pages

Archives

Categories