jquery实现背景图片动态适应
背景
在我的一个项目中用到了背景图片，发现其中有一个问题，当页面长度动态变化时，原来能占满全部内容背景的图片会变得不能占满全部背景。如下图的效果：
这是正常的，背景图片占满全屏
当页面内容变长出现了滚动条时，背景图片显示出现了问题
问题解决
下面附上我解决这个问题的代码：
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实现背景图片动态适应的更多相关文章
- Jquery获取背景图片src路径
例如获取body的背景: Jquery代码如下: var back = $('body').css('backgroundImage'); back.substring(start,end); //截 ...
- jQuery 实现网页图片动态游走，碰到边框反弹
学学jQuery,实现个小功能练练手 需要用到定时器 html代码如下 <html> <head> <title></title> <script ...
- j-query应用---鼠标悬停不同文字显示不同背景图片banner动画
源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- 一款基于jquery的下拉点击改变背景图片
今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览 源码下载 实现的代码. html代码: <a ...
- 用jquery向网页添加背景图片 拉伸 模糊 遮罩层 代码
方法一:手动添加 1.在body内任意位置添加html代码 <div id="web_bg" style=" position:fixed; _position:a ...
- php 合并图片 (将活动背景图片和动态二维码图片合成一张图片)
<?php //案例一:将活动背景图片和动态二维码图片合成一张图片 //图片一 $path_1 = './background.png'; //图片二 $path_2 = './FU0851_2 ...
- VS2010，MFC动态按钮和窗体背景图片，以及是静态文字控件透明，并避免静态文字刷新出现的重叠问题
1.动态按钮的四种动作 1)正常 2)按下 3)滑过 4)失效 在MFC中,4个动作对应着四种位图bmp, 首先,将代表四种状态的位图加载入资源中,将对应的按钮设置为BitmapButton 第二,在 ...
- JQuery插件supersized.js实现背景图片淡入浅出
淡入浅出的网站背景图片切换,其实是引用了JQuery插件supersized,效果很炫吧.其实这个插件功能很强大,可以做很多图片类的效果.这些需要等待我们自己去探索. 下面是这个效果的代码只有一行: ...
- 【转】UGUI之用脚本动态的改变Button的背景图片 和 颜色
http://blog.csdn.net/u014771617/article/details/45102701 public Button button;void Start(){ColorBloc ...
随机推荐
- 检索关键字 nyoj
检索关键字 时间限制: 1000ms 内存限制: 65536KB 64位整型: Java 类名: 上一题 提交 运行结果 统计 讨论版 下一题 类型: 没有 没有 难度 ...
- vs2013下OpenGL环境的配置
1.下载glut库:https://files.cnblogs.com/files/laoxia/glutdlls37beta.zip 2.解压后,将glut.lib和glut32.lib两个文件拷贝 ...
- 用exec调用带有output输出参数的存储过程
用exec调用带有output输出参数的存储过程,想要得到输出参数的值,必须在调用参数后面加output关键字,如: declare @value int exec up_test 2,3,@v ...
- ASP.NET WEB SERVICE 创建、部署与使用
PS: 开发工具 VS2010, 所有工程都为Debug状态,本人刚接触 Web Service,此文为菜鸟入门用例,高手勿笑! 转载请注明出处 :http://www.cnblogs.com/yyc ...
- 终于完成了 源码 编译lnmp环境
经过了大概一个星期的努力,终于按照海生的编译流程将lnmp环境源码安装出来了 nginx 和php 主要参考 http://hessian.cn/p/1273.html mysql 主要参考 http ...
- BASIC-28_蓝桥杯_Huffuman树
题目: 问题描述 Huffman树在编码中有着广泛的应用.在这里,我们只关心Huffman树的构造过程. 给出一列数{pi}={p0, p1, …, pn-1},用这列数构造Huffman树的过程如下 ...
- R语言学习——循环判断语句
循环 判断 函数 函数是一个对象,可以赋值 函数要放在调用函数的前面 输入输出 read.csv()------文本文件 csv是comma separated value的英文缩写,其读取逗号分隔 ...
- 未来的趋势发展 802.11v网络协议解析
目前的无线网络中,一个基站通常与拥有最强信号的接入点联系在一起.但是,这个接入点也许过载了.在802.11v标准中,包括了一个指令,接入点能够使用这个指令要求一个基站报告它支持的无线电信道.传输的功率 ...
- Vcenter一次性将服务器四个网卡从端口组迁移到分布式交换机的方法
如果你的服务器已经在清单列表里了,那么可以先从分布式交换机将这台服务器删除,然后再添加一次.这个时候的添加就可以选择四个网卡(包括端口组,包括管理端口组),一次性加入分布式交换机
- 扫盲贴，802.11AD
早在去年,大家已经开始关注新的802.11ad规范,其高频高带宽低延迟的特性也让大家对将来的无线网络应用形态充满了期待,而今年的CES2016展会上,已经有不少的802.11ad产品出现,看来2016 ...