在网页制作中,友情链接往往是不可缺少的版块,如果能制作出占用版面小,又具有个性化的滚动式的友情链接,就能为网站增加一些亮点,对网页外观也起到很好的渲染作用。在此,我们郑州网站建设公司整理编写了这个具有向上滚动功能的动态显示友情链接的实例代码,采用了Marquee技术和ul、li技术相结合的设计思路。在本例中,提供了实现的代码和运行的图示,各位可以根据自己的需要动态地改变成其他样式,这些都可以由代码灵活控制。下面的图示是运行的结果图,图中的友情链接不断地上滚,循环往复,如果鼠标移动到Marquee区域,友情链接将停止滚动,这时可以点击任何链接,而如果鼠标离开Marquee区域,友情链接接着滚动,本例中的代码我们郑州网站建设公司的编码人员已经在多个浏览器上测试通过,各建站用户和网站建设技术人员可以做参考或者直接应用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=gb2312">
<title>使用MARQUEE制作上滚式的友情链接版块(本实例由郑州网站建设公司--郑州凯讯公司提供)</title>
<style type="text/css">
ul{list-style:none; margin:0; padding:0;}
ul li{ line-height:25px; font-size:14px; margin-left:10px;}
ul li a{margin-left:5px;}
</style>
</head>
<body>
<marquee id="rolldisplay" onmouseover="rolldisplay.stop();" style="font-size:12px;" onmouseout="rolldisplay.start();" scrollAmount="2" direction="up" width="120" height="150" bgcolor="#EEEEEE">
<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>
<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>
</marquee>
</body>
</html>