很多时候,我需要把浏览器屏幕切割相类似九宫格,十六宫格……如果可以自动生成就好了.下面是我做的一个例子.根据传进的参数,可以把浏览器实现平均分割.
在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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <title></title> 5 <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" /> 6 <script src="js/jquery-1.4.1.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 pageAdditional("container", 2, ""); 10 }); 11 //追加生成 12 function pageAdditional(pageId, count, data) 13 { 14 var oBodyHeight = $(window).height();//获取浏览器的高度 15 var oBodyWwidth = $(window).width();//获取浏览器的宽度 16 var length = count;//长度决定宫格 17 var objDataSet = data;//用来接收自定义模板数据 18 for (var i = 0; i < length; i++) {//生成的是行 19 var lineHeight=oBodyHeight/length;//行高 20 var topHeight = ($(window).height() / length) * i;//行距离顶部的高度(Top) 21 $('#'+pageId+'').append(templateLine(i, '#00123' + i, lineHeight, topHeight)); 22 for (var j = 0; j < length; j++) {//生成的是列 23 var columnWidth=oBodyWwidth/length;//列宽 24 var leftWidth = ($(window).width() / length) * j;//列距离左侧的长度(Left) 25 $('#' + i + '').append(templateColumn('lie' + j, "blue", columnWidth, leftWidth)); 26 } 27 } 28 } 29 30 //定义行模版 31 function templateLine(id,backgroundcolor,heightPx,topPx) {//top的变化-------代表行 32 var template = '<div id="' + id + '" style="background:' + backgroundcolor + ';100%;height:' + heightPx + 'px;top:' + topPx + 'px;" class="container"></div>' 33 return template; 34 }; 35 //定义列模版 36 function templateColumn(id,backgroundcolor,widthPx,leftPx) {//left的变化-------代表列(列中的数据模板未定义) 37 var template = '<div id="' + id + '" style="background:' + backgroundcolor + ';' + widthPx + 'px;height:100%;left:' + leftPx + 'px;" class="container"></div>' 38 return template; 39 } 40 </script> 41 </head> 42 <body> 43 <div id="container" class="container"></div> 44 </body> 45 </html>
效果是两行两列.