一款js控制背景图片平铺
背景图片的平铺方法有很多种,纯色背景,渐变背景,图片背景,今天讲的是移动端的图片背景~~~~
<style>
html,body{height:100%;padding:;margin:;}
.body{background: url(image.jpg) no-repeat 0 0;background-size: 100% 100%;}
</style>
<body class="body">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
<script>
(function(w){
function changeBg(params){
var self = this;
self.direction = 1;//1为竖平,2为垂直
self.bodyWidth = self.bodyHeight = self.width = self.height = 1;
function afterChangeDirection(){
self.bodyWidth = $(document).width();
self.bodyHeight = $(document).height();
if(self.direction == 1){
document.body.style="";
}else{
var h = self.bodyWidth / (self.width/self.height);
h = Math.max(self.height,h);
$("body").height(h + "px");
document.body.style.backgroundSize=self.bodyWidth+"px "+h + "px";
}
}
function setDirection(dir){
self.direction = dir;
afterChangeDirection();
}
function init(){
$.extend(self,params);
self.bodyWidth = $(document).width();
self.bodyHeight = $(document).height();
if(w.matchMedia) {
var mql = w.matchMedia("(orientation: portrait)");
if (mql.matches) {// 如果有匹配,则我们处于垂直视角
setDirection(1);
} else {//水平方向
setDirection(2);
}
mql.addListener(function(m) {
if(m.matches) {// 改变到直立方向
setDirection(1);
} else {// 改变到水平方向
setDirection(2);
}
});
}else if(typeof(w.orientation) != 'undefined'){
w.addEventListener('orientationchange', function(event){
if ( w.orientation == 180 || w.orientation==0 ) {
setDirection(1);
}else {//if( window.orientation == 90 || window.orientation == -90 )
setDirection(2);
}
});
}
}
init();
}
w.changeBg = changeBg;
})(window); //这个代码放页面里,上面代码放JS文件里
$(function(){
new changeBg({
width:395, //背景图片实际宽度
height:700 //背景图片实际高度
});
});
</script>
</body>
一款js控制背景图片平铺的更多相关文章
- ie8下背景图片平铺问题
IE9+及其他浏览器实现背景图片平铺可能需要一个属性就可以background-size:100%/cover; 但是ie8下background-size是不兼容的,因此我们需要用到滤镜,来解决背景 ...
- Duilib技巧:背景图片平铺
贴图的描述 方式有两种 // 1.aaa.jpg // 2.file='aaa.jpg' res='' restype='0' dest='0,0,0,0' source='0,0,0,0 ...
- Android中设定背景图片平铺。
注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 在做Android开发时,我们常常需要为程序设定一个背景,但由于现在的Android设备尺寸不一,如果随便设置一个图片为背景,那么很 ...
- Android设置背景图片平铺
以LinearLayout为例,它提供的background属性将会将背景图片拉伸,相当难看.其实我们仅仅需做少量的改动就能够实现web编程中css背景图片的效果.来试试吧. 创建反复的背景图片 在d ...
- Android: 背景图片平铺要这么干
<?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="htt ...
- CSS背景横向平铺BUG,解决方法
给定DIV一个背景图片横向平铺,缩小浏览器,拉动横向滚动条,此时触发此BUG:背景图片平铺不完整 解决办法: 1.把背景图片写在BODY上,此办法局限于没有使用iframe的情况下,所以少用 2.设定 ...
- LODOP打印超文本保留背景色带平铺水印
前面的博文:LODOP中设置设置图片平铺水印,超文本透明. 介绍过 ,如果不想去掉超文本的背景色,想在超文本背景色和超文本内容文字之间加上水印,让水印在背景色上面,文字下面,是不行的,因为平铺的图片和 ...
- CSS背景100%平铺 浏览器缩小背景显示不全解决办法
本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺 ...
- css 样式 图片平铺整个界面
比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在css2.1之前是不能被修改的. 所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y, ...
随机推荐
- linux read 用法
1.基本读取 read命令接收标准输入(键盘)的输入,或其他文件描述符的输入(后面在说).得到输入后,read命令将数据放入一个标准变量中.下面是 read命令 的最简单形式:: #!/bin/bas ...
- android 基础项目及开发出现:error opening trace file: No such file or directory错误解决
本身这个错误不影响运行,但是看着烦啊.解决方案几种如下: 1.xml标签不完整或者未关闭,常有的事.Eclipse并不是所有的xml标记都检查,单双标记什么的. 2.有人说,据说是 android a ...
- ios二维码扫描插件,适配当前主流扫描软件,自定义扫描界面。
二维码介绍: 二维码(QR(Quick Response)code),又称二维条码,最早起源于日本. 它是用特定的几何图形按一定规律在平面(二维方向)上分布的黑白相间的图形,是所有信息 ...
- Linux上安装MPEG-1 Layer3(mp3)解码器
今天突然想要在linux上播放音乐,但是打开之后发现缺少了解码器 于是去网上找了解决的方法,说得天花乱坠,不过有个帖子给出了很简单的方法. 以下内容转载于网络 上面提示没有安装解码器,这是因为版权问题 ...
- [改善Java代码]不推荐覆写start方法
多线程比较简单的方式是继承Thread类,然后覆写run()方法,在客户端程序中通过调用对象的start方法即可启动一个线程,这个是多线程程序的标准写法. 错误代码: public class Cli ...
- [改善Java代码]警惕自增的陷阱
建议7: 警惕自增的陷阱 老师就说:自增有两种形式,分别是i++和++i,i++表示的是先赋值后加1,++i是先加1后赋值,这样理解了很多年也没出现问题,直到遇到如下代码,我才怀疑我的理解是不是错了: ...
- 网页播放amr格式文件
mp3格式大家都知道,amr格式就陌生了,至少我没听过.百度一下,先给自己扫盲: AMR(Adaptive Multi-Rate):nokia为WB-AMR格式(AWB)的铃声所作的商业命名,以被3G ...
- visual studio 2013 快捷键大全、VS2013常用快捷键
Visual Studio 2013 是一个基本完整的开发工具集,它包括了整个软件生命周期中所需要的大部分工具,如UML工具.代码管控工具.集成开发环境(IDE)等等.VS 2013 中新增了很多提高 ...
- sql常识-SQL 通配符
在搜索数据库中的数据时,您可以使用 SQL 通配符. SQL 通配符 在搜索数据库中的数据时,SQL 通配符可以替代一个或多个字符. SQL 通配符必须与 LIKE 运算符一起使用. 在 SQL 中, ...
- TSQL基础(三)
字符处理函数 sql中常见的字符类型有: char(n) --长度固定 不可变 非Unicode 字符数据 n 必须是一个介于 1 和 8,000 之间的数值 nchar(n) --长度固定 不可变 ...