背景

　　在我的一个项目中用到了背景图片，发现其中有一个问题，当页面长度动态变化时，原来能占满全部内容背景的图片会变得不能占满全部背景。如下图的效果：

这是正常的，背景图片占满全屏

当页面内容变长出现了滚动条时，背景图片显示出现了问题

　　问题解决　　

　　下面附上我解决这个问题的代码：

　　js代码：

/*

 * 根据类名获取元素

 */

document.getElementsByClassName = function(oParent,sClass){

    var aResult = [];

    var aNode = oParent.getElementsByTagName("*");

    for(var i=0; i<aNode.length; i++){

        if($(aNode[i]).hasClass(sClass)){

            aResult.push(aNode[i]);

        }

    }

    return aResult;

}

/*

 * 设置背景图片占满整个页面

 * 参数：body，如果不填，默认给body元素设置背景，body可以是一个id名或者类名，或者是一个元素对象

 */

function setBackground(body){

    var bodyObject = body;

    if(typeof(body) == "string")

    {

        bodyObject = document.getElementById(body);

        if(bodyObject == null || bodyObject == undefined)

        {

            bodyObject = document.getElementsByClassName(document.getElementsByTagName("html")[0], body)[0];

        }

        if(bodyObject == null || bodyObject == undefined)

        {

            bodyObject = document.getElementsByTagName("body")[0];

        }

    }

    else if(typeof(body) == "undefined"){

        bodyObject = document.getElementsByTagName("body")[0];

    }

    $(function(){

        var bodyHeight = $(window).height();

        var bodyWidth = $(window).width();

        if($(bodyObject).height()>=bodyHeight){ //当页面高度大于等于窗口高度时，使高度自适应

            $(bodyObject).css("height", "100%");

            // 使用一个延时，防时执行下面的代码时上面一条代码没来得及改变高度，给内容高度改变留一些时间

            setTimeout(function(){

                if($(bodyObject).height() < bodyHeight){//这里是原来高度大于等于窗口高度，自适应后高度又小于窗口高度

                    $(bodyObject).height(bodyHeight);

                }

                },100);

        }

        else{ // 当页面内容没有窗口高时，使高度为窗口高度

            $(bodyObject).height(bodyHeight);

        }

        $(bodyObject).width(bodyWidth);

    });

}

　　css代码：

.paged-aritcle

{

    background: url("../image/article.jpg") no-repeat;

    background-size: 100% 100%;

    overflow-x: hidden;

}

　　jsp代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="/javaqun/css/articlelist.css" type="text/css" />

<link rel="stylesheet" href="/javaqun/css/common.css" type="text/css" />

<script type="text/javascript" src="/javaqun/js/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="/javaqun/js/common.js"></script>

<script type="text/javascript" src="/javaqun/js/initPage.js"></script>

<script type="text/javascript" src="/javaqun/js/article.js"></script>

<link rel="shortcut icon" href="/javaqun/favicon.ico" type="image/x-icon" />

<title></title>

</head>

<!-- 设置body的类名 -->

<body class="paged-aritcle">

    <div id="return">

        <a href="/javaqun/admin/article/getArticleList.action">文章列表</a>

    </div>

    <div class="container">

        <div class="title" id="pageName">${title }</div>

        <div class="pageArticle" id="pageArticle"></div>

        <div style="width: 100%;text-align: center;"><div id="columnPage"></div></div>

    </div>

</body>

<script type="text/javascript">

$(function(){

    initColumnPage(${singleNum}, "showPageSingleArticle");

    showPageSingleArticle(1, 10);

});

setBackground();//这里第一次设置了背景图片

</script>

</html>

　　上面用到了一个分页插件，当分页高度改变时，会重新设置高度

function initColumnPage(totalCount, pageFunction)

{

    pageUtil.initPage('columnPage',{

        totalCount:totalCount,//总条数，一般从回调函数中获取。如果没有数据则默认为1页

        curPage:1,//初始化时的默认选中页，默认第一页。如果所填范围溢出或者非数字或者数字字符串，则默认第一页

        showCount:5,//分页栏显示的数量

        pageSizeList:[5,10,20],//自定义分页数，默认[5,10,15,20,50]

        defaultPageSize:10,//默认选中的分页数,默认选中第一个。如果未匹配到数组或者默认数组中，则也为第一个

        isJump:true,//是否包含跳转功能，默认false

        isPageNum:true,//是否显示分页下拉选择，默认false

        isPN:true,//是否显示上一页和下一页，默认true

        isFL:false,//是否显示首页和末页，默认true

        jump:function(curPage,pageSize){//跳转功能回调，传递回来2个参数，当前页和每页大小。如果没有设置分页下拉，则第二个参数永远为0。这里的this被指定为一个空对象，如果回调中需用到this请自行使用bind方法

            eval(pageFunction + "(" + curPage + ", " + pageSize + ")");

            setBackground(); //当高度改变时，重新设置页面高度

        },

    });

}

　　修改后效果

　　总结

　　自己实际开发中的经验，水平有限，难免初级有错，仅供参考。

jquery实现背景图片动态适应的更多相关文章

  1. Jquery获取背景图片src路径

    例如获取body的背景: Jquery代码如下: var back = $('body').css('backgroundImage'); back.substring(start,end); //截 ...

  2. jQuery 实现网页图片动态游走，碰到边框反弹

    学学jQuery,实现个小功能练练手 需要用到定时器 html代码如下 <html> <head> <title></title> <script ...

  3. j-query应用---鼠标悬停不同文字显示不同背景图片banner动画

    源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  4. 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a ...

  5. 用jquery向网页添加背景图片 拉伸 模糊 遮罩层 代码

    方法一:手动添加 1.在body内任意位置添加html代码 <div id="web_bg" style=" position:fixed; _position:a ...

  6. php 合并图片 (将活动背景图片和动态二维码图片合成一张图片)

    <?php //案例一:将活动背景图片和动态二维码图片合成一张图片 //图片一 $path_1 = './background.png'; //图片二 $path_2 = './FU0851_2 ...

  7. VS2010，MFC动态按钮和窗体背景图片，以及是静态文字控件透明，并避免静态文字刷新出现的重叠问题

    1.动态按钮的四种动作 1)正常 2)按下 3)滑过 4)失效 在MFC中,4个动作对应着四种位图bmp, 首先,将代表四种状态的位图加载入资源中,将对应的按钮设置为BitmapButton 第二,在 ...

  8. JQuery插件supersized.js实现背景图片淡入浅出

    淡入浅出的网站背景图片切换,其实是引用了JQuery插件supersized,效果很炫吧.其实这个插件功能很强大,可以做很多图片类的效果.这些需要等待我们自己去探索. 下面是这个效果的代码只有一行: ...

  9. 【转】UGUI之用脚本动态的改变Button的背景图片 和 颜色

    http://blog.csdn.net/u014771617/article/details/45102701 public Button button;void Start(){ColorBloc ...

随机推荐

  1. 02.将uboot，kernel，rootfs下载到开发板上

    转载,侵删 将uboot,kernel,rootfs下载到开发板上 1.为什么要下载 所谓下载,也称烧录,部署. 1.1.什么是u-boot Hi3518EV200 单板的 Bootloader 采用 ...

  2. RequireJS 学习

    几个学习点: 配置模块路径 定义模块 配置不支持 AMD jsonp 服务 text 插件 css 插件

  3. 一 JAVA整体概念以及安装部署

    JAVA 基本概念  JVM(JAVA virtual machine)java虚拟机,是java的能跨平台的核心,java的跨平台实现,就是在各种系统中布置JVM,然后java应用运行在JVM中,相 ...

  4. .csv 和 .xls 的区别

    .csv 和 .xls 的区别 .csv .xls 较为通用,易导入至各式表格.资料库等 Microsoft excel的专用档案 文本档案,用记事本就可以打开 二进位档案,只有用excel才能打开 ...

  5. Charles ：mac上的手机代理

    能在手机访问电脑上的网页. 配置: 下载 Charles,选中 Proxy => macOS Proxy Proxy => Proxy Setting 配置上端口 手机无线手动代理,配置上 ...

  6. Jupyter和IPython

    Jupyter内核就是IPython(Interactive Python):你看到的按tab键能够自动提示/补齐都是IPython实现的. IPython其实不只限于IPython,其实你看到的ID ...

  7. ASP.NET Core 2.0 使用支付宝PC网站支付实现代码（转）

    最近在使用ASP.NET Core来进行开发,刚好有个接入支付宝支付的需求,百度了一下没找到相关的资料,看了官方的SDK以及Demo都还是.NET Framework的,所以就先根据官方SDK的源码, ...

  8. Microsoft Dynamics CRM4.0 创建单据的时候，自动生成单据编号的通用方法

    一.新建两个实体,具体如下: 单据流水号(new_maxbillcode) 显示名称 名称 类型 格式 最大长度 需求级别 IME模式 备注 名称 new_name nvarchar 文本 100 业 ...

  9. AsyncTask使用详细说明

    AsyncTask使用: 在开发Android应用时必须遵守单线程模型的原则: Android UI操作并不是线程安全的并且这些操作必须在UI线程中执行.在单线程模型中始终要记住两条法则: 1. 不要 ...

  10. js原生态函数中使用jQuery中的 $(this)无效的解决方法

    原文地址:http://www.jb51.net/article/27238.htm 今天遇到一个听郁闷的问题,正如title所说 js中原生态函数在jQuery 中使用 $(this) 被解析成un ...