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

<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. 文本编辑器Nano实用快捷键

    一.复制.剪切和粘贴文本 1.行复制.剪切和粘贴 Alt+6:复制光标所在行. Ctrl+K:剪切光标所在行. Ctrl+U:粘贴. 2.自由复制.剪切和粘贴 自由复制: Ctrl+6:设置复制文本的 ...

  2. ie提示jquer缺少标识符，字符串或数字

    属性之间是要用","分隔的,但最后一个属性的后面在IE中是不能有的,firefox可有可无. 至于最后的";"是另外一回事了.这是Javascript的语法问题 ...

  3. document.body.clientHeight与document.documentElement.clientHeight

    当你的网页有: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  4. .net 在不同情况下调用带soapheader的webservice的方式

    国庆长假到了,本想出去玩玩,无奈自己屌丝一枚,啥都没有,只能自己宅在家里思考思考人生.不过人生还是过于复杂,一时间也想不出个所以然,只能是整理一下在工作中遇到的一些小问题,首先是关于带soaphead ...

  5. 协议Protocol

    1.协议:是一组声明方法的集合,不能声明成员变量,作用类似于接口.           遵守此协议的类就相当于拥有了这个协议的所有方法的声明,如果父类遵守了某个协议,子类也遵守了这个协议.       ...

  6. iOS “获取验证码”按钮的倒计时功能

    iOS 的倒计时有多种实现细节,Cocoa Touch 为我们提供了 NSTimer 类和 GCD 的dispatch_source_set_timer方法去更加方便的使用计时器.我们也可以很容易的的 ...

  7. iOS-实现验证码倒计时功能（1）

    验证码倒计时按钮的应用是非常普遍的,该Blog就和你一起来写一个IDCountDownButton来实现验证码倒计时的效果.你可以想使用普通的UIButton类型按钮一样,只需要设置其倒计时时长(若未 ...

  8. 在vs环境中跑动sift特征提取（代码部分）

    因为在前两天的学习中发现.在opencv环境中跑动sift特征点提取还是比较困难的. 所以在此,进行记述. 遇到的问题分别有,csdn不愿意花费积分.配置gtk困难.教程海量然而能跑者鲜.描述不详尽等 ...

  9. 关于启动 Eclipse 弹出“Failed to load the JNI shared library jvm.dll”错误的解决方法！

  10. Linux 内核模块设计

    一.  内核模块 1.  头文件 Linux/init.h  和 Linux/module.h 2.  装载内核 insmod  对应的转载函数 module_init(); 3.  卸载内核 rmm ...