背景

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

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

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

　　问题解决　　

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

　　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. Linux下远程备份、上传工程，重启服务器

    Linux下远程备份.上传工程,重启服务器 Linux服务器实现远程,原项目的备份.删除,新项目上传,以及远程重启服务器!分成一个主shell调用三个shell文件步骤完成.mainsh.sh一次按顺 ...

  2. 【转】每天一个linux命令（39）：grep 命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/12/17/2821195.html Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表 ...

  3. 使用js提交form表单的两种方法

    提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用sub ...

  4. 如何使用Django 启动命令行及执行脚本

    使用django启动命令行和脚本,可以方便的使用django框架做开发,例如,数据库的操作等. 下面分别介绍使用方法. django shell的启动 启动命令: $/data/python-virt ...

  5. 解决“Replace wireless configuration ”默认被选上的问题

    方法一 1.打开 /home/tingpan/openwrt/barrier_breaker/feeds/luci/modules/admin-full/luasrc/model/cbi/admin_ ...

  6. css-inline-block和float的布局二者择其一？

    几个月前,带着不甘和忐忑毅然决然的在亚马逊离职了,当时不知道对我来说是好是坏,现在看来,当初的选择还是蛮不错的.感觉在亚马逊的几个月貌似接触最多的就是wiki和tt了,怀着对技术热忱离开,拒绝了腾讯, ...

  7. 小峰mybatis（3）mybatis分页和缓存

    一.mybatis分页-逻辑分页和物理分页: 逻辑分页: mybatis内置的分页是逻辑分页:数据库里有100条数据,要每页显示10条,mybatis先把100条数据取出来,放到内存里,从内存里取10 ...

  8. 转转转！！java基础一些静态代码块等知识点

    一.代码块: 构造代码块------类中方法的外面:每次调用构造方法都执行: 静态代码块------类中方法的外面,括号前加上static:只执行一次,随着类的加载而执行: static代码块.构造代 ...

  9. dubbo框架及dubbo环境搭建

    https://blog.csdn.net/liuhaiabc/article/details/52781351 dubbo框架及dubbo环境搭建

  10. [UE4]Character，飞行模式。

    Character 是pawn的子类,可以行走.跳跃.游泳.飞行的Pawn.