zoukankan      html  css  js  c++  java
  • 背景图片随窗口大小改变自适应

    效果参考

    http://vip.163.com/

    http://vip.sina.com.cn/

    特点:背景图片在不变形的情况下尽可能的显示完整,窗口不出现滚动条,始终全屏显示

    JS:

    #content代表最外层的DIV,使页面全屏

    .bg代表背景图片

    <img src="#" class="bg" />

     //此参数表示图片缩放的比例,如果有需要定位在窗口某位置的图片,可根据此变量改变该图片的大小和坐标,使其在窗口大小改变的时候可以保持和背景固定的比例及位置,
    var scale = 1; 
    var bgMarginTop=150;
    //计算比例值
    var o = 图片宽度/图片高度;
    var screenWidth = $(window).width();
    var screenHeight = $(window).height();
    //设置窗口全屏
    $("#content").css({"height":screenHeight,"width":screenWidth}) 
    var a = screenWidth / screenHeight;
    if (o > a ){
        scale = parseInt($(".bg").width())/1920;
        $(".bg").height(screenHeight+bgMarginTop*scale).width("");
        
        
    }else if(o < a ) {
        scale = screenWidth/1920;
        $(".bg").width(screenWidth).height("");
        
    }
  • 相关阅读:
    链表相加
    Unity 摄像机跟随
    整数反转
    两数和
    频繁项集挖掘思路
    有关于二进制的乘法计算(原码一位乘)
    JAVA面向对象(下)
    JAVAAPI
    JAVA面向对象()上)
    JAVA基础第一章
  • 原文地址:https://www.cnblogs.com/liqingchang/p/4286574.html
Copyright © 2011-2022 走看看