JavaScript+jQuery课程设计.doc

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.5.2定期滚动文本代码81.6 运行结果及结论162 参考资料211 正文1.1设计目的 JavaScript 的特点是无穷无尽的，只要你有创意。JavaScript是由Netscape公司开发的一种跨平台，面向对象(object-oriented)的网页脚本语言(Web Script Language)，是目前流行的网页特效设计语言。 本课设主题：网页文字特效 通过两个Javascript程序（其实是一个文档，一个文本文件）分别实现文字上下跳动和滚动文本特效；对网页布局的设计、色彩搭配；文字的编辑；背景音乐、图片的插入；实现视觉、听觉美的享受。1.2总体设计文字上下跳动文本：通过anim函数来进行位置的变换（主要的原理就是改变文本所在对象的top属性）同时实现自身的递归循环，通过start函数来实现主函数的启动。滚动文本：浏览器情况（以document.all浏览器为例）选择不同调用函数，通过setTimeout()方法实现函数move3和move4的延迟调用（先执行其后语句）同时实现递归循环，达到滚动文本顺序滚进滚动页面区域的效果；语句：window.onload=startscroll事件加载完成，通过函数startscroll来实现主函数的启动。1.3 关键技术1.3.1HTML概念 HTML（Hyper Text Markup Language 超文本标识语言） 是一种用来制作超文本文档的简单标记语言。 用HTML编写的超文本文件称为HTML文件，也称Web文件。1.3.2网页文件命名1. *.htm或*.html1.3.3 HTML 文件结构 元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 元素定义HTML文档的标题。 与之间的内容将显示在浏览器窗口的标题栏。 HTML 文件的正文/元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。 元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如），也有一个结束的标记（如）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。 HTML元素属性:HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的内，并且和元素名之间有一个空格分隔；属性值用“”引起来。1.3.4将JavaScript嵌入网页JavaScript代码可直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后通过浏览器来解释执行。v JavaScript 语句插入 HTML的方式： 使用 标签将语句嵌入文档 将 JavaScript 源文件(.js)链接到 HTML 文档中. v JavaScript 语句插入 HTML的位置： body部分的JS head部分的JS：当脚本被调用、事件被触发时执行，可保证在调用函数前，脚本已载入1.3.5部分关键元素及属性表格元素及属性定义表格的一个单元格定义表格的行定义一个表格width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。border属性：表格边线粗细bgcolor属性：指定表格或某一个单元格的背景颜色align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式设置表格格子之间空间的大小 设置表格格子边框与其内部内容之间空间的大小 设置表格格子的水平对齐（左中右） or 设置表格格子的垂直对齐（上中下） 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定期滚动文本流程图Top 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)从底端移入, Top属于（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属于（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; 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)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等- 明天，你好!- setTimeout(start(),1000);/-1.5.2定期滚动文本代码定期滚动文本 var scrollerwidth=450/滚动宽度属于单元格内容部分var scrollerheight=250/滚动高度var scrollerbgcolor=#fffaaa/3000 miliseconds=4 secondsvar pausebetweenimages=1000var slideimages=new Array()slideimages0= 欢迎进入 不惋惜，不呼唤，我也不啼哭一切将逝去如苹果花丛的薄雾金黄的落叶堆满我心间slideimages1=我已经再不是青春少年。心儿啊，你已开始悄悄冷却，如今再不会那样地跳跃：slideimages2=这白桦的图案织成的家园，再不能吸引我赤脚留连。流浪者的激情哪！越来越不见你，slideimages3=促使我轻轻吐出火热的言语。啊，我的白白流逝的华年！迸发的憎恨和奔放的情感！slideimages4=如今我已倦于期待未来，生活呀，难道你是一场幻梦？仿佛我曾在喧闹的春晨 slideimages5=在玫瑰色的骏马上尽情驰骋。槭树的黄叶落地无声，世人都必将腐朽无踪slideimages6=天下的众生啊，你们生生不息，我愿你永远美好、繁荣！ 来自平凡的世界谢谢欣赏！ if (slideimages.length1)i=2elsei=0function move1(whichlayer)/定义函数一，且带参数whichlayertlayer=eval(whichlayer)if (tlayer.top0&tlayer.top=tlayer.document.height*-1)tlayer.top-=5setTimeout(move1(tlayer),100)elsetlayer.top=scrollerheighttlayer.document.write(slideimagesi)tlayer.document.close()if (i=slideimages.length-1)i=0elsei+function move2(whichlayer)/函数二tlayer2=eval(whichlayer)if (tlayer2.top0&tlayer2.top=tlayer2.document.height*-1)tlayer2.top-=5setTimeout(move2(tlayer2),100)elsetlayer2.top=scrollerheighttlayer2.document.write(slideimagesi)tlayer2.document.close()if (i=slideimages.length-1)i=0elsei+function move3(whichdiv)/第二个被调用的函数,代参whichdiv（形参）=first2( 实参)tdiv=eval(whichdiv)if (tdiv.style.pixelTop0&tdiv.style.pixelTop=tdiv.offsetHeight*-1)/offsetHeight获取对象（tdiv2=second2）的高度，相对于布局而言tdiv.style.pixelTop-=5setTimeout(move3(tdiv),100)elsetdiv.style.pixelTop=scrollerheighttdiv.innerHTML=slideimagesiif (i=slideimages.length-1)i=0elsei+function move4(whichdiv)/函数4tdiv2=eval(whichdiv)if (tdiv2.style.pixelTop0&tdiv2.style.pixelTop=tdiv2.offsetHeight*-1)tdiv2.style.pixelTop-=5setTimeout(move4(second2),100)elsetdiv2.style.pixelTop=scrollerheighttdiv2.innerHTML=slideimagesiif (i=slideimages.length-1)i=0elsei+function startscroll()/第一个被调用的函数if (document.all)move3(first2)second2.style.top=scrollerheightelse if (document.layers)/ 如果浏览器是Netscapemove1(document.main.document.first)document.main.document.second.top=scrollerheight+5document.main.document.second.v