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

<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. mysql-----gtid_executed详解 原创

    MySQL 5.6版本开启GTID模式,必须打开参数log_slave_updates, 简单来说就是必须在从机上再记录一份二进制日志.这样的无论对性能还是存储的开销,无疑会相应的增大 而MySQL ...

  2. BI之ETL学习（一）kettle

    最近开始折腾数据,起源是多业务数据源需要转换到数据分析平台.这个过程需要跨机器,跨库.同时还需要将业务数据表的内容进行转换,合并,清洗等等操作. 经过多方选型,最终决定使用kettle来作为数据抽取处 ...

  3. android Button 切换背景，实现动态按钮和按钮颜色渐变

        android Button 切换背景,实现动态按钮和按钮颜色渐变 一.添加android 背景筛选器selector实现按钮背景改变     1.右键单击项目->new->Oth ...

  4. OpenCV之邻域运算之最值滤波

    写了一段小程序,分享给大家! //==================================================================== // 作者 : quarry ...

  5. 谈谈 Objective-C 链式语法的实现

    引言 对于 Objective-C 的语法,喜欢的人会觉得它是如此的优雅,代码可读性强,接近自然语言,开发者在调用大多数方法时不需要去查看注释或文档,通常只凭借方法名就可以大致知道这个方法的作用,可以 ...

  6. Android（java）学习笔记114：LayoutInflater和findViewById

    1. 在实际开发中LayoutInflater这个类还是非常有用的,它的作用类似于findViewById(). 不同点是LayoutInflater是用来找res/layout/下的xml布局文件, ...

  7. webservice发布接口

    一:编写接口程序,计算功能类,有加减乘除四个方法 /** * */ package com.hlcui.util; /** * @author Administrator 将此类发布为公共接口 */ ...

  8. 关于js中event的target和currentTarget的区别

    今天又遇到这个问题了,总是搞不清楚target和currentTarget的区别,百度搜索的时候看到一遍文章解释得很清楚,特意记录下录,以备不时之需: target与currentTarget的区别? ...

  9. [转]DataTable用中使用Compute 实现简单的DataTable数据的统计

    本文转自:http://blog.csdn.net/zwxrain/article/details/252285 調用格式: object DataTable.Compute(string expre ...

  10. hdu 4000 树状数组

    思路:找出所有 a<b<c||a<c<b的情况,在找出所有的a<b<c的情况.他们相减剩下就是a<c<b的情况了. #include<iostre ...