背景图片的平铺方法有很多种，纯色背景，渐变背景，图片背景，今天讲的是移动端的图片背景~~~~

<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控制背景图片平铺的更多相关文章

  1. ie8下背景图片平铺问题

    IE9+及其他浏览器实现背景图片平铺可能需要一个属性就可以background-size:100%/cover; 但是ie8下background-size是不兼容的,因此我们需要用到滤镜,来解决背景 ...

  2. Duilib技巧：背景图片平铺

    贴图的描述 方式有两种    // 1.aaa.jpg    // 2.file='aaa.jpg' res='' restype='0' dest='0,0,0,0' source='0,0,0,0 ...

  3. Android中设定背景图片平铺。

    注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 在做Android开发时,我们常常需要为程序设定一个背景,但由于现在的Android设备尺寸不一,如果随便设置一个图片为背景,那么很 ...

  4. Android设置背景图片平铺

    以LinearLayout为例,它提供的background属性将会将背景图片拉伸,相当难看.其实我们仅仅需做少量的改动就能够实现web编程中css背景图片的效果.来试试吧. 创建反复的背景图片 在d ...

  5. Android: 背景图片平铺要这么干

    <?xml version="1.0" encoding="utf-8"?>  <bitmap xmlns:android="htt ...

  6. CSS背景横向平铺BUG，解决方法

    给定DIV一个背景图片横向平铺,缩小浏览器,拉动横向滚动条,此时触发此BUG:背景图片平铺不完整 解决办法: 1.把背景图片写在BODY上,此办法局限于没有使用iframe的情况下,所以少用 2.设定 ...

  7. LODOP打印超文本保留背景色带平铺水印

    前面的博文:LODOP中设置设置图片平铺水印,超文本透明. 介绍过 ,如果不想去掉超文本的背景色,想在超文本背景色和超文本内容文字之间加上水印,让水印在背景色上面,文字下面,是不行的,因为平铺的图片和 ...

  8. CSS背景100%平铺 浏览器缩小背景显示不全解决办法

    本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺 ...

  9. css 样式 图片平铺整个界面

    比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在css2.1之前是不能被修改的. 所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y, ...

随机推荐

  1. maven插件开发（二）

    因为很多jar都是在开发环境中,没有到仓库中,因此偷个懒,用命令直接自动安装到仓库去.在开发的过程中遇到一个比较诡异的问题,插件用命令调mvn 安装jar到仓库总是抛如下异常: maven Canno ...

  2. 已知json类型根据类型封装集合

    1编写帮助类根绝url得到json public static string Post(string url) { string strURL = url; //创建一个HTTP请求 HttpWebR ...

  3. 美H1B签证额满，硕士以上学位仍可申请

    美国公民与移民服务局6月1日宣布,2007会计年度的工作签证H1B名额已经用完,下年度的申请从明年4月1日开始.但在美国获得硕士以上学位的高学历者仍可申请. 据北美世界日报报道,美国移民律师协会对连续 ...

  4. B. Little Dima and Equation

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  5. Collections.synchronizedMap 详解

    众所周知,HashMap 本身非线程安全的,但是当使用 Collections.synchronizedMap(new HashMap()) 进行包装后就返回一个线程安全的Map. 怎么实现的呢?今天 ...

  6. 观察者模式（二）--《Head First DesignPattern》

    我们用Java中自带的观察者模式接口来重写前面的例子. 先看一下类图: 这里用到了一个setChanged函数,它用来标记状态已经改变的事实,好让notifyObservers()知道当它调用时就应该 ...

  7. 关于相对路径和绝对路径及cd命令的使用

    cd (change directory) 目录    跳转到指定目录下 路径定义分为两种:绝对路径(absolute)和相对路径(relative) 绝对路径:从根目录(/)开始写去的文件名或目录名 ...

  8. [转]HTML accesskey 属性

    本文转自:http://www.dreamdu.com/xhtml/attribute_accesskey/ 17.2. HTML accesskey 属性 accesskey 属性  --  代表链 ...

  9. Java 文件名操作的相关工具类

    项目中的操作文件名的工具类: import java.io.File; import java.util.regex.Matcher; import java.util.regex.Pattern; ...

  10. [未完成]关于JavaScript总结

    jsp服务端,js客户端. javascript 是基于对象和事件驱动的脚本语言. 特点: 交互性 安全性(不允许直接访问本地硬盘) 跨平台性(只要是可以解析java的浏览器都可以执行,和平台无关) ...