横屏竖屏图片背景固定底部js

/**
 * @author zhengzhen
 * @version V1.2
 * 
 * 背景图片固定到屏幕底部
 * 根据屏幕大小动态设置背景层图片,
 * 并且不随内容滚动而滚动
 * 同时监听屏幕横屏竖屏 ,变化背景
 * 修改bgImgUrl为你自己的图片背景
 */
/**
 * 追加样式
 */
var bgImgUrl="../img/bg.png";
$(document.head).append("<style type='text/css'>#bg-div{width: 100%;background: url("+bgImgUrl+") no-repeat #f7f9fb;background-attachment: fixed;background-size: 100% auto;background-position-y: bottom;position: fixed;z-index: -1000;}</style>");

/**
 * 追加背景层
 */
$(document.body).prepend("<div id='bg-div'></div>");

var viewportSize = getViewportSize();
//动态获取屏幕大小
function getViewportSize() {
	return {
		width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
		height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
	};
}

/**
 * 设置全局背景层的高度
 */
$("#bg-div").height(viewportSize.height + "px");



/**
 * 监听屏幕变化
 */
window.addEventListener("orientationchange", function() {
	//延时执行,否则会获取翻转前的高度
	setTimeout(function() {
		viewportSize = getViewportSize();
		/**
		 * 设置全局背景层的高度
		 */
		$("#bg-div").height(viewportSize.height + "px");
		

	}, 200);

});