《5.3.1用javascript制作动态HTML.ppt》由会员分享，可在线阅读，更多相关《5.3.1用javascript制作动态HTML.ppt（20页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、作为中国四大传统节日之一的端午节端午节你了解吗？路漫漫其修远兮吾将上下而求索您受委屈了。屈大夫，考一考？什么时间？为什么叫“端午”？除了“端午”，还有其它什么叫法？有什么意义？有哪些民俗活动？有关“端午”的诗词你是否有所耳闻？我带着这些疑问，搜索了相关资料，做了一个小网站。至此，我对“端午”也算是略知一二了。找一找！请大家对比两个网站，找一找网站中两个相同页面的差别。这是网站的第一个页面：欢迎页捋一捋【从网页外观上看】DwcqDwcq的欢迎页的欢迎页的欢迎页的欢迎页Dwcq2Dwcq2的欢迎页的欢迎页的欢迎页的欢迎页区别区别1:1:增加了增加了弹窗弹窗和和时钟时钟特效特效捋一捋【从网页外观上看
2、】DwcqDwcq的首页的首页的首页的首页Dwcq2Dwcq2的首页的首页的首页的首页区别区别2:2:增加了增加了动态滚动图片动态滚动图片特效特效捋一捋【从网页外观上看】DwcqDwcq的的的的”端午概述端午概述端午概述端午概述”页页页页Dwcq2Dwcq2的的的的”端午概述端午概述端午概述端午概述”页页页页区别区别3:3:增加了增加了动态修改背景色动态修改背景色特效特效捋一捋【从网页外观上看】DwcqDwcq的的的的”名字由来名字由来名字由来名字由来”页页页页Dwcq2Dwcq2的的的的”名字由来名字由来名字由来名字由来”页页页页区别区别4:4:增加了增加了栏目名称样式栏目名称样式特效特效说
3、一说：做网站，我们的重点是呈现内容内容；但，也不能完全地忽略形式形式。因为，形式可以为内容增添活力！5.3用javascript制作动态HTML什么是js特效？这个所谓的js特效究竟是如何让网页“动动”起来的？讲一讲：讲一讲：js特效：全称JavaScript，是一种脚本语言，它采用小程序段的方式实现编程，简单的说网页中那些个性化的，比较酷的效果都需要js来完成。实例讲演一：弹窗效果【基础】alert(欢迎来到端午专题网站-端午传情)动手实践一动手实践一实例讲演二：动态变换栏目名样式【提高】在表格中添加对象，并引用java函数特效的代码首页端午概述名字由来人物纪念民俗活动诗词作品在区域添加鼠标
4、放上和离开的事件函数function function out(obj)obj.style.fontSize=10px;obj.style.backgroundColor=;obj.style.color=;function over(obj)obj.style.fontSize=19px;obj.style.backgroundColor=#557799;obj.style.color=white;在区域添加有超链接的文字样式-去掉下划线（可选）a:link,a:visited text-decoration:none;/*超链接无下划线*/动手动手实践实践二二实例讲演三：动态滚图【增强】利
5、用表格定义对象：将图片放置在区块中，注意区块的样式调用，如 在区域定义样式（含引用外部样式）.containermax-width:1024px;width:100%;margin:0 auto;padding:20px;font-size:14px;.preview text-align:center;padding:5px;.preview a display:inline-block;margin:5px;.preview img display:block;width:200px;height:auto;.active outline:3px solid#196cd2;box-shad
6、ow:2px 2px 20px 4px rgba(0,0,0,.5);添加动态js特效，（注意：也是放在区域中）$(.slider-container).ikSlider(speed:500);$(.slider-container).on(changeSlide.ikSlider,function(evt)console.log(evt.currentSlide););var$preview=$(.preview a);function changeActivePreview(i)$(.active).removeClass(active);$preview.eq(i).addClass(a
7、ctive);$preview.on(click,function(e)e.preventDefault();var index=$(this).index();$(.slider-container).ikSlider(index););$(.slider-container).on(changeSlide.ikSlider,function(e)changeActivePreview(e.currentSlide););changeActivePreview(0)动手动手实践三实践三自由发挥：课堂拓展【强化Again】已实践未实践要求：结合自己的网站，利用以下5种特效修饰美化自己的网站。大家来围观我们看好你哦课堂总结请同学结合自己实践的体会，谈一谈本节课的收获！