首页 > 代码库 > JavaScript开发之旅(2):幻灯片播放代码(等比缩放)

JavaScript开发之旅(2):幻灯片播放代码(等比缩放)

2024-07-17 21:30:21   221人阅读

在web开发过程中,少不了使用幻灯片展示.我做的这个幻灯片要放到webbrowser控件里面展示.而我需要做四宫格,九宫格,十六宫格,可能还需要做一个十二宫格.每个宫格放一张图片,一个标题和价格.图片通过JS来读取.一屏一屏的切换.当然,切换可以自己设置切换样式,这些就是我的这个小动画需求.

正因为如此,我必须要考虑下面这两个问题:

    第一个问题,就是我做页面可以在VS2005中的控件webbrowser中正常显示.

    回答:通过查资料我知道了.

    VS 2008 SP1 在Visual Studio中加了更丰富的JavaScript intellisense支持，对很大部分的JavaScript库加了代码完成支持。我使用的是vs2005里面没有JQuery库,也没JQuery智能感知.我仅仅知道VS2010支持JQuery的版本是1.4.1.我不确定vs2005里面是不是支持1.4.1,这个我需要自己测试.结果,在vs2005里面是支持JQuery1.4.1这个版本的,能使用JQuery瞬间就觉得项目简单多了.

    在IE8中测试中也顺利通过了测试.在使用JQuery中,有的时候JQuery版本不同,相对应IE会报错.这个我还在研究.

    第二个问题,这是vs2005所对应的浏览器版本,html版本和xhtml版本.微软的版本都是向上兼容的.可能会发生什么不兼容的现象.

   

第一步,先看一下一张图片的幻灯效果.

 1 <!doctype html> 2 <html lang="en">  3 <head>  4     <meta charset="UTF-8">  5     <title>幻灯片播放代码（等比缩放）v2.0</title> 6 </head> 7 <body bgcolor="Black" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0"> 8     <table id="TAB" width="100%" height="100%" border="0" align="center" cellpadding="0" 9         cellspacing="0" style="filter: revealTrans(duration=0,transition=0);">10         <tr>11             <td align="center" valign="middle">12                 <img id="IMG" onl oad="Resize(this)" border="0" />13             </td>14         </tr>15     </table>16 </body>17 </html>18 19 <script type="text/javascript">20 //获取Html对象21 function $(szID)22 {23     return document.getElementById(szID);24 }25 26 //图片等比缩放27 var OriginImage=new Image();28 function Resize(image)29 {30     var nBodyWidth = document.body.clientWidth;//当前浏览器窗口的宽31     var nBodyHeight = document.body.clientHeight;//当前浏览器窗口的高32 33     if(OriginImage.src != image.src)34         OriginImage.src = image.src;35 36     var fImageWhRatio = OriginImage.width / OriginImage.height;//图片的宽:高37     var fBodyWhRatio=nBodyWidth / nBodyHeight;//窗体的宽:高38 39     if(fImageWhRatio > fBodyWhRatio)40     {41         image.width = nBodyWidth;42         image.height = nBodyWidth / fImageWhRatio;43     }44     else45     {46         image.width = nBodyHeight * fImageWhRatio;47         image.height = nBodyHeight;48     }49 }50 51 //播放幻灯片:图片路径,间隔时间,动画时间52 var Urls = "C:\\动画演示\\Images\\01001.jpg,C:\\动画演示\\Images\\01002.jpg,C:\\动画演示\\Images\\01003.jpg,C:\\动画演示\\Images\\10101.jpg,C:\\动画演示\\Images\\wall1.jpg,C:\\动画演示\\Images\\wall2.jpg,C:\\动画演示\\Images\\wall3.jpg,C:\\动画演示\\Images\\wall4.jpg";53 54 //nInterval:时间间隔55 //nDuration:持续时间56 //szImgUrls:图片路径57 function Play(szImgUrls, nInterval, nDuration)58 {59     var nCurentIndex = 0;               //当前索引60     var nLastTransition = 0;            //上次动画61     var nCurrentTransition = 0;         //当前动画62     var tabHtml = $("TAB");             //Html的TAB对象63     var imgHtml = $("IMG");             //Html的IMG对象64     var aImgUrls = szImgUrls.split(",");//img的src数组65     var bFirst = true;                  //是否第一次显示66     67     var funSwitch = function()          //循环播放特效68     {69         if(bFirst)70         {71             bFirst = false;72             imgHtml.src = aImgUrls[aImgUrls.length - 1];73             setTimeout(funSwitch, 0);//在指定的毫秒数后调用函数或计算表达式74         }75         else76         {77             do78             {79                 nCurrentTransition = Math.floor(Math.random() * 23);//生成0和23之间的随机整数80             }while(nCurrentTransition == nLastTransition)81             nLastTransition = nCurrentTransition;82  83             tabHtml.filters.revealTrans.Transition = nCurrentTransition;//图片动态切换时随机产生的效果84             tabHtml.filters.revealTrans.Duration = nDuration;//设置或检索转换完成所用的时间85             tabHtml.filters.revealTrans.apply();//捕获对象内容的初始显示86             tabHtml.filters.revealTrans.play();//转换呈现出内容的变化结果87             imgHtml.src = aImgUrls[nCurentIndex];//88 89             setTimeout(funSwitch, nInterval);90 91             nCurentIndex++;92             if(nCurentIndex >= aImgUrls.length)93                 nCurentIndex = 0;94         }95     };96     funSwitch();97 }98 Play(Urls, 5000, 2);99 </script>


联系
我们