通知
此博客运行在jpress系统上，如果你喜欢此博客模板，请加QQ群：1061691290（whimurmur模板/jpress插件），免费下载使用

jquery实现背景图片动态适应

1737人浏览 / 0人评论 | 作者：whisper  | 分类： javascript  | 标签： 前端  /  javascript  | 

作者：whisper

链接：http://proprogrammar.com:443/article/297

声明：请尊重原作者的劳动，如需转载请注明出处

　　背景

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

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

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

　　问题解决　　

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

　　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(); //当高度改变时，重新设置页面高度
        },
    });
}

　　修改后效果

　　总结

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

亲爱的读者：有时间可以点赞评论一下

我慒慒懂懂过了一年，这一年似乎没有改变，守着一个人的世界，空空如也
点赞(0) 打赏

相关文章

colgroup中col定义表格单元格宽度
colgroup中col定义表格单元格宽度
js脚本代码调试小技巧
js脚本代码调试小技巧
js脚本代码调试小技巧
js脚本代码调试小技巧

作者其它文章

数据结构 绪论
数据结构 绪论
数据结构第一章 线性表
数据结构第一章 线性表
考研数学导学
考研数学导学

全部评论

还没有评论！