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

<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. Swift 3必看：新的访问控制fileprivate和open

    在swift 3中新增加了两中访问控制权限 fileprivate和 open.下面将对这两种新增访问控制做详细介绍. fileprivate 在原有的swift中的 private其实并不是真正的私 ...

  2. iCloud之旅

    1.创建BIDTinyPixDocument类 #import <UIKit/UIKit.h> //创建文档类 @interface TinyPixDocument : UIDocumen ...

  3. Xquartz远程访问linux

    实验环境:mac 操作系统:         OS X 10.9.4 Mavericksmac IP                      192.168.1.106XQuartz:       ...

  4. scp输入密码问题

    今天查看预发布项目是发现一个问题,代码中使用了ganymed-ssh2-262.jar执行scp远程copy,但发现没有成功,没报错,程序阻塞了 狂搜...郁闷的是按照网上说的,做了几遍但是没成功,没 ...

  5. zabbix电话告警V1

    最近决定将夜班值班人员取消,夜里告警采用机器人电话通知.总结一下这么几个情况,有问题还请指出,希望也能给大家多一个思路. V1做的太糙了,预计年初上V2 一.用谁家的服务 费用我没有太关注,主要就是看 ...

  6. [改善Java代码]覆写变长方法也循规蹈矩

    建议6:覆写变长方法也循规蹈矩 在Java中,子类覆写父类中的方法很常见,这样做既可以修正Bug也可以提供扩展的业务功能支持,同时还符合开闭原则(Open-Closed Principle),我们来看 ...

  7. Linux下RPM软件包的安装及卸载

    http://os.51cto.com/art/201001/177866.htm 在 Linux 操作系统下,几乎所有的软件均通过RPM 进行安装.卸载及管理等操作.RPM 的全称为Redhat P ...

  8. 实用工具推荐（Live Writer）（2015年05月26日）

    1.写博客的实用工具 推荐软件:Live Writer 使用步骤: 1.安装 Live Essential 2011,下载地址:http://explore.live.com/windows-live ...

  9. Ajax发送FormData对象封装的表单数据

    前端页面: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

  10. 获得随机的n条结果行

    * FROM [Menu] order by NEWID() * FROM [Menu]