泸州老窖（全屏滚动）项目总结

Posted 2020-06-17

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（）的使用技巧：

①针对第一个的点击效果。

②事件转移，即你点击的是这个元素，其实你在点击另外一个东西。