标签：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
标签：style blog http color io os ar java for
原文地址：http://www.cnblogs.com/doujinya/p/4037325.html
