泸州老窖(全屏滚动)项目总结
1、单位很重要,外面的框架使用百分比,但是里面的东西使用固定宽度(px),不然出现很多问题。
2、宽度低于1200px、高度低于600px(这些值都是根据设计可以动态调整的)出现滚动条,但是最低是这个值就差不多了。宽度低于1200px已经基本没有了。
3、背景需要铺满全屏,并且居中显示,内容固定宽度,水平居中,一般不会高于1200px。
背景全屏代码:
element.style { width: 1627px; height: 915.1875px; margin-left: -813.5px; left: 50%; } .bg { position: absolute; z-index: 10; bottom: 0; //由于下面有地球的图片。 left: 0; display: block; width: 100%;
1 function updateBgSize(){ 2 var imgWidth = 1920; //图片原始大小 3 var imgHeight = 1080; 4 var imgRatio = imgWidth/imgHeight; //获取比例 5 var _img = $( ".bg" ); //获取背景图 6 var flag=$(window).width()>$(".content1").width(); //如果浏览器的宽度大于内容的宽度(1200px)时 7 $(".section").height($(window).height()); //浏览器的高度给.section 8 if(flag){ //如果成立 9 var _window = $(window); 10 $("#marked").removeClass("smallWindow"); 11 //tph=$(".tpos").height() 12 var _windownWidth = _window.width(), 13 _windowHeight = _window.height(); 14 if( _windownWidth/_windowHeight > imgRatio ){ 15 _img.width( _windownWidth ); 16 _img.height( (_windownWidth * imgHeight)/imgWidth ); 17 }else{ 18 _img.width( (_windowHeight * imgWidth)/imgHeight ); 19 _img.height( _windowHeight ); 20 } 21 _img.css({"margin-left":-_img.width()/2,"left":"50%"}); 22 }else{ 23 $("#marked").addClass("smallWindow"); 24 } 25 var flag2=$(window).height()<600?true:false; //判断高度 26 if(flag2){ 27 $("#marked").addClass("smallWindow2"); 28 }else{ 29 $("#marked").removeClass("smallWindow2"); 30 } 31 indexImgPos(); 32 }
4、不能使用文字来撑图片的大小,(绝对定位的图片)。会出现网页打开就出现图片100%的情况,需要给里面的图片设置固定的宽度或高度(px)。
5、对于首屏需要通过js来定位的flash元素,需先对其预加载之后、js定位的代码之后、再通过js里的append到相应的代码块(标签)中。或者先让其display:none;定位代码之后在让其显示出来。也是可以的。
6、对于字体设置,可以直接设置成微软雅黑,reset.css有问题。导致IE7下不是微软雅黑。
7、在flash中如果需要添加点击类的事件时,前端只需把事件处理函数写在需要添加该flash的页面。单独用<script>标签包起来。再给AS组提供这些事件处理函数的函数名即可(qa、searchJob)。测试的时候一定要注意的就是需要在服务器环境下或者webstorm下打开才能测试出来效果,不然是没有效果的。本地打开无效果。代码如下:
<script type="text/javascript"> function qa(){ $('#m5').trigger('click'); } function searchJob(){ $('#m3').trigger('click'); } </script>
8、关于定位:具有定位的元素总是比没定位的元素层级要高。比如:如果上面的背景图是绝对定位的元素,则必然会覆盖在下面的没有定位的元素的上面。解决办法,给下面的没定位的元素加上position:relative即可。
9、jscrollpane插件的使用:其只能在需要加滚动条的div的display:block之后才能渲染出滚动条,不然不能成功加载滚动条。关于滚动条速度可以看:http://www.cnblogs.com/qianduanjingying/p/5221914.html
还有一点需要注意的就是由于屏幕大小随时变可以全部适应。所以在每次$(window).resize()时;都需要重置滚动条。
10、几个块级元素居中显示,需要做的就是在容器里面加text-align:center;在里面的这些li里面加上display:inline-block;*display:inline;zoom:1。三不可缺。
11、jquery中的trigger()的使用技巧:
①针对第一个的点击效果。
②事件转移,即你点击的是这个元素,其实你在点击另外一个东西。