jquery插件--h5移动设备自适应 transform scale

浏览数：60 / 时间：2015年06月11日

// 创建一个闭包  
(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