通知 网站从因情语写改为晴雨,这个网站的模板也从calmlog_ex改为 whimurmur

jquery实现背景图片动态适应

1169人浏览 / 0人评论 / | 作者:因情语写  | 分类: javascript  | 标签: 前端  /  javascript

作者:因情语写

链接:https://www.qingyu.blue/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) 打赏

全部评论

还没有评论!