标签：des cWeb style blog color java 使用 os
在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" onload="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 else 45 { 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 else 76 { 77 do 78 { 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>
JavaScript开发之旅(2):幻灯片播放代码(等比缩放),布布扣,bubuko.com
JavaScript开发之旅(2):幻灯片播放代码(等比缩放)
标签：des cWeb style blog color java 使用 os
原文地址：http://www.cnblogs.com/liubeimeng/p/3916119.html
