第七章-JavaScript常用特效-JavaScript及网页特效制作课件.ppt

《第七章-JavaScript常用特效-JavaScript及网页特效制作课件.ppt》由会员分享，可在线阅读，更多相关《第七章-JavaScript常用特效-JavaScript及网页特效制作课件.ppt（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、JavaScript与网页特效制作与网页特效制作 第七章第七章第七章第七章JavaScriptJavaScript常用特效常用特效本章案例本章案例制作绚丽的文字特效制作绚丽的文字特效实现图片循环放映效果实现图片循环放映效果实现美观的网站导航实现美观的网站导航 本章目标本章目标掌握掌握JavaScript文字常用特效文字常用特效掌握掌握JavaScript图片常用特效图片常用特效掌握掌握JavaScript导航常用特效导航常用特效预习检查预习检查提问提问如何使用如何使用JavaScript获取元素的样式属性？获取元素的样式属性？如何给文本设置滤镜效果？如何给文本设置滤镜效果？切换图片使用的时间函

2、数是什么？切换图片使用的时间函数是什么？JavaScript文字特效文字特效文字淡入淡出文字淡入淡出淡入淡出，指文字从透明度较高的状态进入透明度低的状态，然后淡入淡出，指文字从透明度较高的状态进入透明度低的状态，然后再回到透明度高的状态，显示到页面上就会看到文字由模糊到清晰再回到透明度高的状态，显示到页面上就会看到文字由模糊到清晰再到模糊的样子。再到模糊的样子。文字淡入淡出，需要使用文字淡入淡出，需要使用CSS样式的滤镜效果样式的滤镜效果filter。获取。获取CSS滤镜滤镜效果属性的效果属性的JS代码如下：代码如下：element.style.filter设置文字透明度效果使用滤镜为设置文字

3、透明度效果使用滤镜为alpha，代码如下：，代码如下：element.style.filter =alpha(opacity=50);JavaScript文字特效文字特效/方法定义省略方法定义省略function alp().var i=1;control=true;/设置页面设置页面div宽度宽度document.getElementById(txt).style.width=800;document.getElementById(txt).style.filter=alpha(opacity=+i+);if(control&i 0)i-;else control=true;setTimeo

4、ut(alp();,500);使用使用style.width属属性设置性设置div宽度宽度使用使用style.filter属属性设置透明度性设置透明度使用使用setTimeout函函数数500毫秒后调用毫秒后调用alp()函数函数演示程序演示程序font.htmlJavaScript文字特效文字特效动感标题动感标题闪动的标题无疑是很吸引眼球的一种效果，很多情况下甚至比图片闪动的标题无疑是很吸引眼球的一种效果，很多情况下甚至比图片更有装饰的能力。更有装饰的能力。使文字闪动的方式有很多种，除去前面的过滤器以外，还可以采用使文字闪动的方式有很多种，除去前面的过滤器以外，还可以采用不断替换当前文字的方

5、式来实现不断替换当前文字的方式来实现“动动”的效果，这也是比较常用的的效果，这也是比较常用的一种简单的动态效果。一种简单的动态效果。动感标题动感标题2采用动态设置每一个文本的字符样式的方式实现效果。采用动态设置每一个文本的字符样式的方式实现效果。var text=正在加载，请稍后正在加载，请稍后.;var i=0;function loader()var str=text.charAt(i);/取出某一个字符取出某一个字符str=+str+;/将取出的字符加粗将取出的字符加粗leftStr=text.substr(0,i);/截取此字符之前的所有字符截取此字符之前的所有字符rightStr=t

6、ext.substr(i+1,text.length-1);/截取之后的所截取之后的所有字符有字符document.getElementById(txt).innerHTML=leftStr+str+rightStr;/拼接拼接i+;/控制截取的索引控制截取的索引if(i=text.length)i=0;setTimeout(loader();,500);/500毫秒后调用毫秒后调用loader()window.onload=loader;动态截取目标文本的动态截取目标文本的某一个字符某一个字符为目标字符设置加粗样式为目标字符设置加粗样式从原始文本中截取所有其它从原始文本中截取所有其它字符并重

7、新拼接，显示到字符并重新拼接，显示到div中中演示程序演示程序loading.html课堂练习课堂练习为页面上显示的文本为页面上显示的文本“我自横刀向天笑，去留肝胆两昆仑。我自横刀向天笑，去留肝胆两昆仑。”，逐个文字变色，实现文字闪动效果。，逐个文字变色，实现文字闪动效果。JavaScript图片特效图片特效普通的图片轮换普通的图片轮换仅仅进行图片轮换，没有使用轮换特效。仅仅进行图片轮换，没有使用轮换特效。var images=new Array();/定义数组存储图片定义数组存储图片var jpg1=images/1.jpg;var jpg2=images/2.jpg;var jpg3=im

8、ages/3.jpg;images.push(jpg1);images.push(jpg2);images.push(jpg3var i=0;function change()var img=document.getElementById(imgs);img.src=imagesi;/改变当前图片改变当前图片src属性属性i+;/控制数组索引控制数组索引if(i=images.length)i=0;setTimeout(change();,1000);/一秒后调用此方一秒后调用此方法法window.onload=change;使用数组存储需要轮换的图使用数组存储需要轮换的图片路径片路径定时改变

9、定时改变img标签的标签的src属性，属性，引用不同的图片引用不同的图片1秒钟后调用秒钟后调用change()方法方法演示程序图片自动轮换演示程序图片自动轮换.html课堂练习课堂练习当前页面显示当前页面显示1张图片，为图片增加单击事件，当鼠标单击张图片，为图片增加单击事件，当鼠标单击图片时，自动显示下一张图片图片时，自动显示下一张图片(共有共有10张图片，显示到最后张图片，显示到最后一张时点击后再次显示第一张一张时点击后再次显示第一张)。JavaScript导航特效导航特效导航是每个网站都拥有的页面内容，对于网站来说，导航导航是每个网站都拥有的页面内容，对于网站来说，导航就相当于地图，通过导

10、航就可以得知网站的主要版块是什就相当于地图，通过导航就可以得知网站的主要版块是什么，同时可以方便的导向自己所需要的内容。么，同时可以方便的导向自己所需要的内容。几乎所有的网站都拥有自己的导航，如何做出别出心裁而几乎所有的网站都拥有自己的导航，如何做出别出心裁而又美丽实用的导航也是开发者比较关注的一面，而且动感又美丽实用的导航也是开发者比较关注的一面，而且动感导航的制作也是导航的制作也是JavaScript特效中比较复杂的。特效中比较复杂的。JavaScript导航特效导航特效分析分析鼠标悬停在主菜单时子菜单开始进入，需为主菜单所在鼠标悬停在主菜单时子菜单开始进入，需为主菜单所在div设置设置o

11、nMouseOver事件。事件。鼠标离开主菜单时子菜单消失，需为主菜单所在鼠标离开主菜单时子菜单消失，需为主菜单所在div设置设置onMouseOut事件。事件。子菜单从两侧逐渐进入页面，需使用定时器逐渐减少或子菜单从两侧逐渐进入页面，需使用定时器逐渐减少或增加子菜单所在增加子菜单所在div的左边界距离，离开页面则相反。的左边界距离，离开页面则相反。为子菜单所在为子菜单所在div设置滤镜效果，实现淡入淡出。设置滤镜效果，实现淡入淡出。JavaScript导航特效导航特效处理菜单进入动作的函数处理菜单进入动作的函数function menuItemIn()/菜单进入菜单进入 if(leftLin

12、e!=150)/判断是否已达到指定位置判断是否已达到指定位置 item11.style.pixelLeft+=20;item11.filters.alpha.opacity+=20;item12.style.pixelLeft-=20;item12.filters.alpha.opacity+=20;/省略其它菜单操作省略其它菜单操作 leftLine+=20;else clearTimeout(window.timerIn);/停止计时器停止计时器 return false;/启动计时器启动计时器 timerIn=window.setTimeout(menuItemIn(),1);将两侧进入

13、的子菜单的将两侧进入的子菜单的左边距进行增加或减少，左边距进行增加或减少，并设置滤镜效果并设置滤镜效果JavaScript导航特效导航特效处理菜单移除动作的函数处理菜单移除动作的函数function menuItemOut()/菜单移出菜单移出 clearTimeout(window.timerIn);/停止菜单进入的计时器停止菜单进入的计时器 if(leftLine!=50)/判断菜单是否已经到达指定位置判断菜单是否已经到达指定位置 item11.style.pixelLeft-=20;item11.filters.alpha.opacity-=20;item12.style.pixelLe

14、ft+=20;item12.filters.alpha.opacity-=20;/其它菜单操作省略其它菜单操作省略.leftLine-=20;else clearTimeout(window.timerOut);return false;timerOut=window.setTimeout(menuItemOut(),1);一旦开始菜单移出，立即一旦开始菜单移出，立即停止进入动作停止进入动作增加或减少两侧子菜单增加或减少两侧子菜单的左边距，并设置滤镜的左边距，并设置滤镜效果效果子菜单移动到指定位置后，子菜单移动到指定位置后，停止计时器停止计时器1毫秒后启动计时器毫秒后启动计时器JavaScri

15、pt导航特效导航特效计时器控制计时器控制设置启动子菜单移出的计时器设置启动子菜单移出的计时器function runTimerline()window.timerlineTimer=setTimeout(menuItemOut(),500停止子菜单移出的计时器停止子菜单移出的计时器function stopTimerline()clearTimeout(window.timerlineTimer);JavaScript导航特效导航特效为主菜单绑定为主菜单绑定onMouseOver及及onMouseOut事件。事件。主菜单主菜单 设置主菜单设置主菜单div的主要样式属性：绝对定位、左边距，顶部的主要样式属性：绝对定位、左边距，顶部边距、宽度、高度。边距、宽度、高度。鼠标进入时停止移出的鼠标进入时停止移出的计时器，并使子菜单开计时器，并使子菜单开始进入始进入启动子菜单移出的定时器启动子菜单移出的定时器演示程序导航特效演示程序导航特效.html作业作业JavaScript与网页特效制作与网页特效制作