网站空间和数据库2021年10月新闻摘抄
【前言】
在学习javascript的过程中我越来越喜欢做一些小例子来体验动态交互带来的快乐感,不仅让我对于javascript的学习不再那么的抗拒,也让对它越来越熟悉,一切都是在实践中成长!最近学习了一个特别的效果就是文字的特效
【内容】:
文字的移动特效主要是通过了html语言的<marqueee>标签实现的,这是网页最常见的也是最多的一种动态的效果。但是注意Netscape浏览器中不支持这个标签。所以我们分为了两种情况来编写代码:一种:不考虑兼容性的问题;二种:考虑兼容性的问题。
代码的展示:
1.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>文字特效</title><script src="Scripts/文字特效.js" type="text/javascript"></script>
</head>
<body><p><center><font color="ffaafa"><h2>文字移动的效果——上下滚动的文字</h2></font><hr width="300" /></p><marquee direction="up" scrollAmount="3" style="width:400px; height:300px"><font face="Arial" color=#993366><strong><big>欢迎访问我的博客,虽然本人还是菜鸟,但是很认真的对待这个平台,希望在这个可以收获很多,也希望你们可以提出宝贵的建议</big></strong></font></marquee>
</center>
</body>
</html>
2.
//定义了的文本的宽度var MarqueeWidth = "400px";//文本的长度var MarqueeHeight ="300px";//文本移动的速度var speed = 3;var marqueecontents = '<font face="Arial" color=#993366><strong><big>欢迎访问我的博客,虽然本人还是菜鸟,但是很认真的对待这个平台,希望在这个可以收获很多,也希望你们可以提出宝贵的建议</big></strong></font>';if (document.all) { //当前文档的所有对象的娄组document.write('<marquee direction="up" scrollAmount=' + speed + ' style="width:+MarqueeWidth+"; height:' + MarqueeHeight + '">' + marqueecontents + '</marquee>')function regenerater() { //再生事件if (document.layers) { //Netscape 4.x专有的属性,是一个代表所有由储如<div><layer>等定位了的元素的数组setTimeout("window.onersize=regenerater", 450);intializemarquee;}}function intializemarquee() {document.MarqueeMessage001.document.MarqueeMessage002.document.write(marqueecontents);document.MarqueeMessage001.document.MarqueeMessage002.document.close();thelength = document.MarqueeMessage001.document.MarqueeMessage002.document.height;scrollText();}function scrollText() {if (document.MarqueeMessage001.document.MarqueeMessage002.top > thelength * (-1)) {document.MarqueeMessage001.document.MarqueeMessage002.top = speed;}else {document.MarqueeMessage001.document.MarqueeMessage002.top = MarqueeHeightscrollText();}}window.onload = regenerater;}
<head runat="server"><title>文字特效</title><script src="Scripts/文字特效.js" type="text/javascript"></script>
</head>
<body><p><center><font color="ffaafa"><h2>文字移动的效果——上下滚动的文字</h2></font><hr width="300" /></p><ilayer name="MarqueeMessage001" width=&{Marqueewidth};height=&{MarqueeHeight};><layer name="MarqueeMessage002" width=&{Marqueewidth} height=&{MarqueeHeight}></layer></ilayer>
</body>
【实现效果图】