苹果控9.24日结
苹果控是团队的自主项目。使用Xcode的phonegap进行的混合开发。用于iphone版本
--------------------------------------今天做的界面--------------------------------------
-------------------------------------------------------------------------------------------------------
1.跨平台开发的弹性布局是要注意的，我刚开始是用普通的网页去做例子 每一个块我可以用<a>,<div><p>等等标签。当我想把这些标签变成一行2个 一共2行的时候 果断使用float：left；很好用。但是在混合开发过程中。float：left的使用真的很让人匪夷所思。当我把做好的网页版往混合开发上转的时候。因为我用的是混合开发的框架。所以对于弹性布局是已经布局好的。框架类似
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link href="css/index.css" rel="stylesheet" type="text/css" /> <script src="js/iscroll.js"></script> </head> <body> <div class="outerFrame"> <div class="topFont">水果美容</div> <div id="wrapper" class="wrapper"> <div id="myScroll_meirong" class="myScroll_meirong"> <div>123</div> <div>123</div> <div>123</div> </div> </div> <div id="footerStyle" class="footerStyle"> <a href="NewIndex.html"><img src="images/1beforeImg.jpg" alt="img1.jpg"/></a> <a href="Beautiful.html"><img src="images/2afterImg.jpg" alt="img2.jpg"/></a> <a href="Slimming.html"><img src="images/3beforeImg.jpg" alt="img3.jpg"/></a> <a href="Taboo.html"><img src="images/4beforeImg.jpg" alt="img4.jpg"/></a> <a href="Knowledge.html"><img src="images/5beforeImg.jpg" alt="img5.jpg"/></a> </div> </div> <script src="js/common.js"></script> </body> </html>
我只需改<div>123</div>的位置的123内容就可以了，刚开始我以为直接把我的网页上分出好的块直接把123删掉直接套进去 ，后来发现页面在模拟器上代码无法日后扩展，所以我就努力去更改css 后来又做成4个div 然后都float 但是这时候的问题又变成了 所有div都奇迹的消失了，--》实际上改动是一个div其实就是一行 当然 div的宽度需要改成100%，在这个行里添加两个行属性标签 就可以变成1行两个 所以我需要两个div 每个div里分别加两个行属性标签 日后扩展的时候 就是再加div 这样扩展 这个问题就是要不所有的小块都消失 要不日后无法扩展
2.js上因为涉及css3的animation动画 这个动画怎样用js去控制呢？因为我想做的效果就是一个一个的出来 然后带上渐变的动画，因为jqmoble的渐变动画不会用 用原生的jq在跨平台上肯定会卡 所以就只能使用css3的animation动画。js链接css3的动画的就使用js的dom 的setAttribute 为想要的内个div添加一个class，添加的这个class属性加上动画的值 就可以链接到css3的动画上了
for (i=0;i<as.length;i++) { if(b==i) { as[i].style.display="block"; /*as[i].style.cssText*/ as[i].setAttribute('class','bbb') } }
.bbb{ -webkit-animation: aaa 0.2s ease ; } @-webkit-keyframes aaa { 0%{ opacity: 0.1; } 20%{ opacity: 0.2; } 40%{ opacity: 0.4; } 60%{ opacity: 0.6; } 80%{ opacity: 0.8; } 100%{ opacity: 1; } }
3.当写多层效果时布局一定要清晰。不然最后每个块想要最理想的效果时。margin和padding乱用的时候 会出现模拟器显示效果和网页版显示效果不一样～