//Create a closed package(function($) { //definition of plug-in$.fn.scale =function(options) {varobj = This; varopts =$.extend ({}, $.fn.scale.defaults, options); Init (obj, opts); $ (window). Resize (function(event) {init (obj, opts); }); }; functioninit (obj, opts) {varW =$ (window). width (); varh =$ (window). Height (); varObj_w = Obj.width () +opts.offset*2; if(w<opts.scale_w) { varXScale = W/obj_w; Zoom ratiovarYscale =XScale; //Scaling and offsetsObj.css ({' Transform ': ' scale (' + XScale + ', ' + Yscale + ') ', ' Transform-origin ': ' 0px 0px ', /*IE 9*/'-ms-transform ': ' Scale (' + XScale + ', ' + Yscale + ') ', '-ms-transform-origin ': ' 0px 0px ', /*Safari and Chrome*/'-webkit-transform ': ' Scale (' + XScale + ', ' + Yscale + ') ', '-webkit-transform-origin ': ' 0px 0px ', /*Firefox*/'-moz-transform ': ' Scale (' + XScale + ', ' + Yscale + ') ', '-moz-transform-origin ': ' 0px 0px ', /*Opera*/'-o-transform ': ' Scale (' + XScale + ', ' + Yscale + ') ', '-o-transform-origin ': ' 0px 0px ' }); }Else{obj.css ({' Display ': ' Block ', ' Margin ': ' 0 auto ', ' Transform ': ' Scale (1, 1) ', ' Transform-origin ': ' 0px 0px ', /*IE 9*/'-ms-transform ': ' Scale (1, 1) ', '-ms-transform-origin ': ' 0px 0px ', /*Safari and Chrome*/'-webkit-transform ': ' Scale (1, 1) ', '-webkit-transform-origin ': ' 0px 0px ', /*Firefox*/'-moz-transform ': ' Scale (1, 1) ', '-moz-transform-origin ': ' 0px 0px ', /*Opera*/'-o-transform ': ' Scale (1, 1) ', '-o-transform-origin ': ' 0px 0px ' }); } } //plug -in defaults$.fn.scale.defaults ={scale_w:640,//scales the standard width, which is smaller than the width of this pixelOffset:20//Object Padding deviation }; // closing closure}) (JQuery);
Call Mode:
<script src= "Jquery-1.7.2.js" type= "Text/javascript" ></script> <script src= "Jquery.scale.js" Type= "Text/javascript" ></script> <script type= "Text/javascript" > $ (function () { var opts = { // scale standard, screen smaller than this pixel to zoom out offset:20 }; $ ("#lal"). Scale (opts); }); </script>
HTML code test.html
<! DOCTYPE html>
: HTTP://PAN.BAIDU.COM/S/1I3QYGS9
jquery Plugin--h5 mobile device Adaptive Transform scale