javascript实现页面上的ppt效果 (2008-09-28 16:27:30) 转载▼
经常网站的主页上使用ppt方式播放图片,有的是使用flash做的,当然也有的使用javascript做的。现在就讲讲怎么用javascript做。 这里并不是单单的用javascript做的,是结合了css中的扩展效果做的。废话少说。
看看代码吧,并加以了说明。
1、网页相应位置放入img标签。 <a href='javascript:goPicUrl()'> <img style="FILTER: revealTrans(duration=2,Transition=5)" src="javascript:NextPic()" width="300" height="200" border="1" id=imgInit name=imgInit /> </a>
这里是将图片放在了链接标签的里面,是为了实现,播放中的图片鼠标可以点击。a里面放入了一个方法goPicUrl()这个方法下面介绍。这里先知道,他是控制点击该链接以后,图片链接的地址。img中使用了css内嵌样式,并使用了滤镜(filter)效果中的过渡(revealTrans),其中duration指定每张图片的过渡时间,以秒计算,transition指定过渡方式,其取值是0-23之间。src则指定img图片,这里使用NextPic方法,来指定图片源。width,height为宽高,border指定边框,id,name为标识。 2、javascript方法 <script type = "text/javascript" > //因为图片有多个,所以图片地址,点击图片对应链接地址,图片名称我都是用“#”连在一起的字符串 //使用时再用“#”劈开,就可以获得所有图片信息的数组,从而获得所有的图片。 var imgUrlStr= "${imgUrl}";//图片地址 var imgLinkStr= "${imgLink}";//点击图片对应链接 var imgTextStr= "${imgText}";//图片名称,即鼠标放上面显示的名称 var imgUrl= imgUrlStr.split("#"); var imgLink= imgLinkStr.split("#"); var imgText= imgTextStr.split("#"); var picNum=0;//控制图片信息数组的游标 function NextPic(){ //将游标逐个下移,看是否超出了数组,超出了,则退为0.这里可以控制显示的个数,即取一个固定值, //与imgUrl.length比较较小的那个。则可以控制总共显示多少个。 if(picNum< imgUrl.length -1) picNum++ ;//显示个图片 else picNum=0; if (document.all){ //下面注意,如果存在于FORM表单中,需要使用下面的方法,否则可直接使用name。 //随机取出控制切换效果的值0-23之间 document.imgInit.filters.revealTrans.Transition=Math.floor(Math.random()*23); document.imgInit.filters.revealTrans.apply(); //应用效果
document.imgInit.filters.revealTrans.play(); //播放效果 } document.images.imgInit.src=imgUrl[picNum]; //获得当前图片地址 document.images.imgInit.alt=imgText[picNum]; //设置鼠标放在图片上显示的名称
//如果不是图片,而是SWF等,可做判断,内容可在程序中做好,再放于下面。 // focustext.innerHTML='<a href='+imgLink[picNum]+' target=_blank>'+imgText[picNum]+'</a>'; theTimer=setTimeout('NextPic()', 3000); //设置翻页时间 没3秒中执行一次NextPic方法 } function goPicUrl(){ //如果鼠标点击了当前picNum的图片则将该控制打开该链接地址, window.open(imgLink[picNum],'_blank'); } </script> 下载地址: jquery hove事件制作鼠标悬停图片上滑动显示文字内容 调用JS的函数NextPic() |