5.3.1用JavaScript制作动态HTML.pptVIP

作为中国四大传统节日之一的端午节你了解吗 路漫漫其修远兮 吾将上下而求索 您受委屈了 屈大夫 考一考 什么时间 为什么叫 端午 除了 端午 还有其它什么叫法 有什么意义 有哪些民俗活动 有关 端午 的诗词你是否有所耳闻 我带着这些疑问 搜索了相关资料 做了一个小网站 至此 我对 端午 也算是略知一二了 找一找 请大家对比两个网站 找一找网站中两个相同页面的差别 这是网站的第一个页面 欢迎页 捋一捋 从网页外观上看 Dwcq的欢迎页 Dwcq2的欢迎页 区别1 增加了弹窗和时钟特效 捋一捋 从网页外观上看 Dwcq的首页 Dwcq2的首页 区别2 增加了动态滚动图片特效 捋一捋 从网页外观上看 Dwcq的 端午概述 页 Dwcq2的 端午概述 页 区别3 增加了动态修改背景色特效 捋一捋 从网页外观上看 Dwcq的 名字由来 页 Dwcq2的 名字由来 页 区别4 增加了栏目名称样式特效 说一说 做网站 我们的重点是呈现内容 但 也不能完全地忽略形式 因为 形式可以为内容增添活力 5 3用javascript制作动态HTML 什么是js特效 这个所谓的js特效究竟是如何让网页 动 起来的 讲一讲 讲一讲 js特效 全称JavaScript 是一种脚本语言 它采用小程序段的方式实现编程 简单的说网页中那些个性化的 比较酷的效果都需要js来完成 实例讲演一 弹窗效果 基础 alert 欢迎来到端午专题网站 端午传情 动手实践一 实例讲演二 动态变换栏目名样式 提高 在表格中添加对象 并引用java函数特效的代码首页端午概述名字由来人物纪念民俗活动诗词作品 在区域添加鼠标放上和离开的事件函数functionfunctionout obj obj style fontSize 10px obj style backgroundColor obj style color functionover obj obj style fontSize 19px obj style backgroundColor 557799 obj style color white 在区域添加有超链接的文字样式 去掉下划线 可选 a link a visited text decoration none 超链接无下划线 动手实践二 实例讲演三 动态滚图 增强 利用表格定义对象 将图片放置在区块中 注意区块的样式调用 如 在区域定义样式 含引用外部样式 container max width 1024px width 100 margin 0auto padding 20px font size 14px preview text align center padding 5px previewa display inline block margin 5px previewimg display block width 200px height auto active outline 3pxsolid 196cd2 box shadow 2px2px20px4pxrgba 0 0 0 5 添加动态js特效 注意 也是放在区域中 slider container ikSlider speed 500 slider container on changeSlide ikSlider function evt console log evt currentSlide var preview previewa functionchangeActivePreview i active removeClass active preview eq i addClass active preview on click function e e preventDefault varindex this index slider container ikSlider index slider container on changeSlide ikSlider function e changeActivePreview e currentSlide changeActivePreview 0 动