一款js控制背景图片平铺

最新推荐文章于 2023-09-02 16:11:20 发布

weixin_34262482

最新推荐文章于 2023-09-02 16:11:20 发布

阅读量909

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/amy-1205/p/5841162.html

版权

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

<style>
        html,body{height:100%;padding:0;margin:0;}
        .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>