marquee无缝链接

最新推荐文章于 2019-08-02 01:38:24 发布

nanalin805

最新推荐文章于 2019-08-02 01:38:24 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/nanalin805/article/details/6509200

版权

marquee的用法是
<marquee 属性>要滚动的文字图片</marquee>
但不管你用marquee的什么属性,都只能实现滚动效果,但不能实现首尾相接循环走马灯效果;你要实现首尾相接循环走动效果,那真的只有借助JavaScript脚本，即是js代码。
下面我给出一个结合marquee和JavaScript来实现首尾相接循环走动效果代码及其实现方法:
1.首先你要先建一个文件夹，比如名为“gundong”的文件夹，再建两个名为“js”和“images”的子文件夹。
2.用记事本将下面的js代码复制进去，保存在js子文件夹下;文件名为scrollpic.js
var speed3=25//速度数值越大速度越慢

Code:

demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed3)}

3.用记事本将下面的html代码复制进去，保存在gundong根文件夹下,文件名为index.htm

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>http://hi.baidu.com/wibmj</title>
<style type="text/css">
td {font-size: 12px;}
</style>
</head>
<body>
<CENTER>
<TABLE style="BORDER: #ccc 1px solid;" cellSpacing=0 cellPadding=0 width=750 align=center border=0>
<TBODY>
<TR>
<TD>
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff">
<TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
<TBODY>
<TR>
<TD id=demo1 vAlign=top><table width="1710" height="116" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="171" background="images/pic_bg.jpg"><div align="center">1</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">
<p>2</p>
</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">3</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">4</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">5</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">6</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">7</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">8</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">9</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">10</div></td>
</tr>
</table></TD>
<TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV>
<script language=JavaScript src="js/scrollpic.js"></script>
</TD></TR></TBODY></TABLE></TD></TR></TABLE>
</CENTER>
</BODY></HTML>

4.在images文件夹中法如一张名为pic_bg.jpg的图片.

注意上面文件的文件名和后缀要保存正确，不要改动，如果改动了，就要修改代码里的路径才能正确显示的，其实也不难。

nanalin805

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
marquee无缝链接

marquee的用法是要滚动的文字图片但不管你用marquee的什么属性,都只能实现滚动效果,但不能实现首尾相接循环走马灯效果;你要实现首尾相接循环走动效果,那真的只有借助JavaScript脚本，即是js代码。下面我给出一个结合marquee和JavaScript来实现首尾相接循环走动效果代码及其实现方法:1.首先你要先建一个文件夹，比如名为“gundong”的文件夹，再建两个名
复制链接

扫一扫