標籤：style blog http color io os ar java for
// 建立一個閉包 (function($) { // 外掛程式的定義 $.fn.scale = function(options) { var obj = this; var opts = $.extend({}, $.fn.scale.defaults, options); init(obj, opts); $(window).resize(function(event) { init(obj, opts); }); }; function init(obj, opts){ var w = $(window).width(); var h = $(window).height(); var obj_w = obj.width()+opts.offset*2; if(w<opts.scale_w){ var xScale = w/obj_w; //縮放比例 var yScale = xScale; //縮放以及位移 obj.css({ ‘transform‘: ‘scale(‘ + xScale + ‘, ‘ + yScale + ‘)‘, ‘transform-origin‘: ‘0px 0px‘, /* IE 9 */ ‘-ms-transform‘: ‘scale(‘ + xScale + ‘, ‘ + yScale + ‘)‘, ‘-ms-transform-origin‘: ‘0px 0px‘, /* Safari 和 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 和 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‘ }); } } // 外掛程式的defaults $.fn.scale.defaults = { scale_w : 640, // 縮放標準寬度, 寬度小於此像素進行縮小 offset : 20 //對象padding偏差 }; // 閉包結束 })(jQuery);
調用方式：
<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_w : 640, //縮放標準，螢幕小於此像素進行縮小 offset : 20 }; $("#lal").scale(opts); }); </script>
html代碼 test.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}body{position: relative;width: 100%;height: 100px;}.lal{width: 640px;height:auto;padding: 20px;overflow: hidden;background: #ccc;font-size: 20px;}</style><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_w : 640, //縮放標準，螢幕小於此像素進行縮小offset : 20 };$("#lal").scale(opts);});</script></head><body><div class="lal" id="lal"> 這裡是文字：sssssss</div></body></html>
：http://pan.baidu.com/s/1i3qYgs9
jquery外掛程式--h5行動裝置自適應 transform scale
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
