背景
在我的一个项目中用到了背景图片,发现其中有一个问题,当页面长度动态变化时,原来能占满全部内容背景的图片会变得不能占满全部背景。如下图的效果:
这是正常的,背景图片占满全屏
当页面内容变长出现了滚动条时,背景图片显示出现了问题
问题解决
下面附上我解决这个问题的代码:
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(); //当高度改变时,重新设置页面高度 }, }); }
修改后效果
总结
自己实际开发中的经验,水平有限,难免初级有错,仅供参考。