您的位置：首页 > Web前端 > JQuery

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

2014-10-20 15:35 387 查看 
// 创建一个闭包
(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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航