首页 > 代码库 > jquery插件--h5移动设备自适应 transform scale
jquery插件--h5移动设备自适应 transform scale
// 创建一个闭包 (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="http://www.mamicode.com/jquery-1.7.2.js" type="text/javascript"></script> <script src="http://www.mamicode.com/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="http://www.mamicode.com/jquery-1.7.2.js" type="text/javascript"></script> <script src="http://www.mamicode.com/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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。