背景

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

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

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

　　问题解决　　

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

　　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. pyotherside 试用

    pyotherside 试用 这是啥?用python写qt 步骤:安装qt: http://www.qt.io/download-open-source/#section-2安装python3:下载源 ...

  2. MapReduce-寻找三角形

    在图中,如何判断三角形?三角形在很多场景都有应用,比如社交网络中确定人和人之间的关系. 那么如果通过代码逻辑来实现呢?在数据结构之图中,区分三联体(有一端没有关联关系的三角形)和三角形是关键:两者之间 ...

  3. Django url反向解析与路由分发名称空间

    url反向解析 url.py from django.conf.urls import url from django.contrib import admin from app01 import v ...

  4. fiddler抓包HTTPS请求

    fiddler抓包HTTPS请求 标签: fiddlerhttps抓包 2016-03-29 21:24 23293人阅读 评论(2) 收藏 举报  分类: 不登高山不知天之高也(1)  版权声明:本 ...

  5. typedef与前向声明

    a.h: typedef struct my_struct { }my_struct_typedef; b.h: struct my_struct; typedef my_struct my_stru ...

  6. BASIC-15_蓝桥杯_字符串对比

    示例代码: #include <stdio.h>#define N 10 int main(void){ int i = 0 ; int len1 = 0 , len2 = 0 , fla ...

  7. bzoj 3795: 魏总刷DP

    Description 魏总,也就是DP魏又开始刷DP了.一共有n道题,第i道题魏总原本需要u[i]秒的时间.不过,为了表达对这些水题的藐视,魏总决定先睡k秒再开始刷题.魏总并不清楚自己会睡多久,只知 ...

  8. position和margin的绝对定位和相对定位

    电脑桌面清理干净之后,果然快了很多,桌面上的东西会占用内存,导致电脑变慢,以前我看到表姐的电脑桌面堆满了东西,我就在心里默默的鄙视不懂玩电脑的人,现在我竟然也养成了这种坏毛病..保存东西的时候放在桌面 ...

  9. Solr Web增加Basic安全性验证

      Solr在5.0版本后,不再提供war包部署的方式,取而代之的是内置了jetty服务,   但是我们发现其中并没有内置任何安全性相关检查,任何人如果知道了我们的外网地址就能直接访问并修改其中的索引 ...

  10. Unreal Engine 4 性能优化工具(Profiler Tool)

    转自:http://aigo.iteye.com/blog/2296548 Profiler Tool Reference https://docs.unrealengine.com/latest/I ...