【JavaScript应用篇】--实现文字的特效

【前言】

在学习javascript的过程中我越来越喜欢做一些小例子来体验动态交互带来的快乐感，不仅让我对于javascript的学习不再那么的抗拒，也让对它越来越熟悉，一切都是在实践中成长！最近学习了一个特别的效果就是文字的特效

【内容】：

文字的移动特效主要是通过了html语言的<marqueee>标签实现的，这是网页最常见的也是最多的一种动态的效果。但是注意Netscape浏览器中不支持这个标签。所以我们分为了两种情况来编写代码：一种：不考虑兼容性的问题；二种：考虑兼容性的问题。

代码的展示：

<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>

  //定义了的文本的宽度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>

【实现效果图】

【JavaScript应用篇】--实现文字的特效相关推荐

html怎么把字做成动画效果,如何使用HTML5 css3实现粒子效果文字动画特效（附完整代码）...
摘要腾兴网为您分享:如何使用HTML5 css3实现粒子效果文字动画特效(附完整代码),学宝,小米社区,手机管家,神州专车等软件知识,以及小学英语点读机,便利宝,startos,工资宝,玩,大将军手 ...
ae制h5文字动画_如何使用HTML5+css3实现粒子效果文字动画特效（附完整代码）
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
css3 卡片亮光_利用css3实现文字亮光特效的代码
这篇文章主要介绍了关于利用css3实现文字亮光特效的代码,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下以前分享过很多css3实现的字体特效,今天给大家分享一款纯css3实现的文字亮光 ...
6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
php 让字体闪烁,js实现文字闪烁特效的方法
本文实例讲述了基于jquery实现省市联动特效的代码,分享给大家供大家参考,具体如下: 运行效果图: 实现原理:使用style对象来设置css属性,结合定时器就可以实现js实现文字闪烁特效. 具体代码 ...
vue动态设置文字布局方式_十大惊人的文字动画特效
本文阿宝哥将给大家介绍十个「"惊人"」的文字动画效果,希望阿宝哥精心录制的十个 Gif 动画能让大家感到「"惊艳"」,当然更希望这些特效能给大家实现文字动 ...
yzmcms图片自适应代码_基于segment.js制作的非常有创意的分段式SVG文字动画特效...
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: 要使用该SVG文字动画特效,要在页面中引入segment.js,它用于动画SVG路径,d3-ease,用于制作ea ...
JavaScript + CSS3 实现的海报画廊特效
原文:JavaScript + CSS3 实现的海报画廊特效这是慕课网上<CSS3+JS 实现超炫的散列画廊特效>的源代码,我修改了一些 bug 和调优了一些细节,并把学习过程中并不了解 ...
html那种折叠文字内容怎么实现,html+css实现文字折叠特效实例
本文主要介绍了html+css实现文字折叠特效实例,分享给大家,具体如下: 效果: 实现: 1. 定义标签: aurora 2. 设置文字基本样式: h1{ text-transform: upper ...
JavaScript进阶篇③ — 浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

【JavaScript应用篇】--实现文字的特效

【JavaScript应用篇】--实现文字的特效相关推荐

最新文章

热门文章