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

<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. 网络IPC：套接字之建立连接

    如果处理的是面向连接的网络服务(SOCK_STREAM或SOCK_SEQPACKET),在开始交换数据以前,需要在请求服务的进程套接字(客户端)和提供服务的进程套接字(服务器)之间建立一个连接.客户端 ...

  2. Computer Science Theory for the Information Age-2: 高维空间中的正方体和Chernoff Bounds

    高维空间中的正方体和Chernoff Bounds 本文将介绍高维空间中正方体的一些性质,以及一个非常常见也是非常有用的概率不等式——Chernoff Bounds. 考虑$d$维单位正方体$C=\{ ...

  3. Android中常用适配器及定义自己的适配器

    转载:http://blog.chinaunix.net/uid-11898547-id-3303153.html http://www.tudou.com/home/_328390108/item ...

  4. java_io_操作封装

    package com.wiker; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import j ...

  5. oracle数据库元数据SQL查询

    oracle数据库经典SQL查询 .查看表空间的名称及大小 select t.tablespace_name, round(sum(bytes/(1024*1024)),0) ts_size from ...

  6. DNA比对

    [编程题](满分27分) 脱氧核糖核酸即常说的DNA,是一类带有遗传信息的生物大分子.它由4种主要的脱氧核苷酸(dAMP.dGMP.dCMT和dTMP)通过磷酸二酯键连接而成.这4种核苷酸可以分别记为 ...

  7. X-Sequence

    Description Let {xi} be the infinite sequence of integers: 1) x0 = A; 2) xi = (alpha * xi-1^2 + beta ...

  8. Java设计模式13：常用设计模式之桥接模式（结构型模式）

    1. Java之桥接模式(Bridge Pattern) (1)概述: 首先我们说一个生活中的例子:       就拿汽车在路上行驶的来说.即有小汽车又有公共汽车,它们都不但能在市区中的公路上行驶,也 ...

  9. Android（java）学习笔记99：android的短信发送器研究

    1.第一种可以调用系统内部的短信程序. 之前我曾经出现过一个bug就是报错: android.content.ActivityNotFoundException: No Activity found ...

  10. SQL Server 日期 时间类型

    --1毫秒＝0.001秒 --1微秒＝0.000 001秒 --1纳秒＝0.000 000 001秒 --datetime精度不大好,末尾值只能是这3种: .000, .003, or .007 -- ...