背景

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

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

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

　　问题解决　　

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

　　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. FastAdmin 开发时对数据库进行版本管理 （非 think-migration）

    因为开必项目,暂时还不没用 think-migration,先用 脚本处理. 在导出 SQL 时将相关字段数据还原,比如 admin logitime updatetime token. 把 admi ...

  2. 【转】第六章、Linux 的文件权限与目录配置

    原文网址:http://vbird.dic.ksu.edu.tw/linux_basic/0210filepermission.php 最近更新日期:2009/08/18 Linux最优秀的地方之一, ...

  3. 前端可视化建模技术概览，包括：GoJS

    我推荐使用的: 库 网址 备注 GoJS https://gojs.net/latest/samples/flowchart.html 推荐使用 相关文章: 前端可视化建模技术概览:http://le ...

  4. hadoop 知识点

    HDFS 命令 命令 说明 fsck 检查文件的完整性 start-balancer.sh 重新平衡HDFS hdfs dfs -copyFromLocal 从本地磁盘复制文件到HDFS hadoop ...

  5. Python——包

    包 —— 把解决一类问题的模块放在同一个文件夹里 包的导入 import 和 from ... import 都行 导入之前:凡是带点的,点的左边都必须是包 导入之后:点的左边可以是包.模块.函数.类 ...

  6. SVN同步

    SVN同步:1.在备份服务器上安装SVN,之后创建同名的库名2.在备机的Repositories的库文件夹下的hooks目录下,备份并修改pre-revprop-change.tmpl文件为pre-r ...

  7. 2018 icpc 徐州网络赛 F Features Track

    这个题,我也没想过我这样直接就过了 #include<bits/stdc++.h> using namespace std; ; typedef pair<int,int> p ...

  8. Response、Request、QueryString,修改，Cookies

    Response对象:响应请求Response.Write("<script>alert('添加成功!')</script>");Response.Redi ...

  9. 第6章 进程控制（3）_wait、exec和system函数

    5. 等待函数 (1)wait和waitpid 头文件 #include <sys/types.h> #include <sys/wait.h> 函数 pid_t wait(i ...

  10. mysql 更新(二)安装和基本管理

    03-MySql安装和基本管理   本节掌握内容: MySQL的介绍安装.启动 MySQL破解密码 MySQL中统一字符编码 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目 ...