一款js控制背景圖片平鋪


背景圖片的平鋪方法有很多種,純色背景,漸變背景,圖片背景,今天講的是移動端的圖片背景~~~~

<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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM