《javascript+jquery课程设计》由会员分享，可在线阅读，更多相关《javascript+jquery课程设计（19页珍藏版）》请在金锄头文库上搜索。
1、JavaScript+jQuery开发框架课程设计题 目 网页特效文字设计 院 （系） 信息工程学院 专 业 班 级 14计算机应用技术2班 学 生 姓 名 蔡明伟 学 号 1432101201 设 计 地 点 指 导 教 师 陈洋 起止时间：2016年5月30日至2016年6月5日目 录1 正文31.1设计目的31.2总体设计31.3 关键技术31.3.1HTML概念31.3.2网页文件命名31.3.3 HTML 文件结构31.3.4将JavaScript嵌入网页41.3.5部分关键元素及属性41.4程序流程图51.4.1上下跳动文本流程图51.5主要源代码71.5.1文本上下跳动代码71.
2、5.2定期滚动文本代码81.6 运行结果及结论162 参考资料211 正文1.1设计目的 JavaScript 的特点是无穷无尽的，只要你有创意。JavaScript是由Netscape公司开发的一种跨平台，面向对象(object-oriented)的网页脚本语言(Web Script Language)，是目前流行的网页特效设计语言。 本课设主题：网页文字特效 通过两个Javascript程序（其实是一个文档，一个文本文件）分别实现文字上下跳动和滚动文本特效；对网页布局的设计、色彩搭配；文字的编辑；背景音乐、图片的插入；实现视觉、听觉美的享受。1.2总体设计文字上下跳动文本：通过anim函数
3、来进行位置的变换（主要的原理就是改变文本所在对象的top属性）同时实现自身的递归循环，通过start函数来实现主函数的启动。滚动文本：浏览器情况（以document.all浏览器为例）选择不同调用函数，通过setTimeout()方法实现函数move3和move4的延迟调用（先执行其后语句）同时实现递归循环，达到滚动文本顺序滚进滚动页面区域的效果；语句：window.onload=startscroll事件加载完成，通过函数startscroll来实现主函数的启动。1.3 关键技术1.3.1HTML概念 HTML（Hyper Text Markup Language 超文本标识语言） 是一种用
4、来制作超文本文档的简单标记语言。 用HTML编写的超文本文件称为HTML文件，也称Web文件。1.3.2网页文件命名1. *.htm或*.html1.3.3 HTML 文件结构 元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 元素定义HTML文档的标题。 与之间的内容将显示在浏览器窗口的标题栏。 HTML 文件的正文/元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。 元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如），也有一个结束的标记（如
5、）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。 HTML元素属性:HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的内，并且和元素名之间有一个空格分隔；属性值用“”引起来。1.3.4将JavaScript嵌入网页JavaScript代码可直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后通过浏览器来解释执行。v JavaScript 语句插入 HTML的方式： 使用 标签将语句嵌入文档 将 JavaScript 源文件(.js)链接到 HTML 文档中. v JavaScript 语句插入 HTML的位置
6、： body部分的JS head部分的JS：当脚本被调用、事件被触发时执行，可保证在调用函数前，脚本已载入1.3.5部分关键元素及属性表格元素及属性定义表格的一个单元格定义表格的行定义一个表格width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。border属性：表格边线粗细bgcolor属性：指定表格或某一个单元格的背景颜色align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式设置表格格子之间空间的大小 设置表格格子边框与其内部内容之间空间的大小 设置表格格子的水平对齐（左中右） o
7、r 设置表格格子的垂直对齐（上中下） or 文本文字标签属性指定颜色 . 字体大小 . 文字布局段(Paragraph) Center粗体文本leftright元素不是成对出现的。下划线文本居中段落超级链接锚元素元素属性href href的属性值为一个URL地址开一个新的(浏览器)窗口 target=“_blank1.4程序流程图1.4.1上下跳动文本流程图（开始）Top=yp=60向下约100ms循环向下跳动4step至top=ypyk跳动方向改变约100ms向上循环跳动40step至top=yp60跳动方向改变约100ms向下循环跳动40step图1.4.11.4.2定期滚动文本流程图To
8、p 1 to 0调用move3 (*.0)停顿约1秒后Move3(slideimages0)从顶端移出*.0位于底端，*.2引入以上html的内容，i=3Move4(slideimages1)从底端移入Top属于（0，5）then top=0*.1停顿约1秒后Move4(*.1) 从顶端移出, *.1位于底端，*.3引入以上html的内容，i=4Move3(slideimages2)从底端移入, Top属于（0，5）then top=0*.2停顿约1秒后Move3(*.2) 从顶端移出, *.2位于底端，*.4引入以上html的内容，i=5Move4(slideimages3)从底端移入, T
9、op属于（0，5）then top=0*.3停顿约1秒后Move4(*.3) 从顶端移出, *.3位于底端，*.5引入以上html的内容，i=6Move3(slideimages4)从底端移入, Top属于（0，5）then top=0*.4停顿约1秒后Move3(*.4) 从顶端移出, *.4位于底端，*.6引入以上html的内容，i=0Move4(slideimages5)从底端移入, Top属于（0，5）then top=0*.5停顿约1秒后Move4(*.5) 从顶端移出, *.5位于底端，*.0引入以上html的内容，i=1Move3(slideimages6)从底端移入, Top属
10、于（0，5）then top=0*.6停顿约1秒后Move3(*.6) 从顶端移出, *.6位于底端，*.1引入以上html的内容，i=2Move4(slideimages0)从底端移入, Top属于（0，5）then top=0图1.4.21.5主要源代码1.5.1文本上下跳动代码!-标签此标签可告知浏览器文档使用哪种 HTML-文本上下跳动!-done = 0;step = 4;function anim(yp,yk) if(document.layers) document.layersnapis.top=yp; else document.allnapis.style.top=yp;
11、if(ypyk) step = -40 if(yp60) step = 40 setTimeout(anim(+(yp+step)+,+yk+), 100);function start() if(done) return done = 1; if(navigator.appName=Netscape) document.napis.left=innerWidth/2 - 145; anim(60,innerHeight - 60) else napis.style.left=200; anim(60,document.body.offsetHeight - 60) /- welcome to 文字跳动 网页 !-标题标签n越大字号越小；DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等- div id=napisstyle=position: absolute; top: 60px; width: 300px; hei
