jquery mobile或javascript中的放大和缩小功能
Zoom in and zoom out functionality in jquery mobile or javascript
使用jQuery mobile有什么好的方法可以放大和缩小页面功能吗。我瞪大眼睛发现
window.parent.document.body.style.zoom = 1.5;
有没有更好的方法可以在jQuery mobile中实现放大和缩小功能?
这里有一个示例解决方法,DEMOhttp://jsfiddle.net/yeyene/aGuLE/
$(document).ready(function () {
$('#zoomIn').on('click', function () {
zoomIn(1.2);
});
$('#zoomOut').on('click', function () {
zoomOut();
});
});
function zoomIn(zoomLev) {
if (zoomLev > 1) {
if (typeof (document.body.style.zoom) != "undefined") {
$(document.body).css('zoom', zoomLev);
}else {
// Mozilla doesn't support zoom, use -moz-transform to scale and compensate for lost width
$('#divWrap').css({
"-moz-transform": 'scale(" + zoomLev + ")',
width: $(window).width() / zoomLev
});
}
}
}
function zoomOut() {
$(document.body).css({
zoom : '',
position : '',
left: "",
top: "",
"-moz-transform" : "",
width : ''
});
}
如果您使用Jquery mobile,您需要检查文件的<head>
中的元数据
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
如果在视口元数据中定义了content="user-scalable=no
,这将阻止您缩放
试试这个。您一定已经在某个地方有了元视口。
var viewportmeta=$("meta[name='viewport']"); //find a viewport meta
viewportmeta.attr("content_original", viewportmeta.attr("content")); //store the initial value
viewportmeta.attr("content", "user-scalable=yes, width=device-width minimum-scale=1, maximum-scale=1"); //make current viewport full zoom out
//do your things...
viewportmeta.attr("content", viewportmeta.attr("content_original")); //then return back to old viewport conditions
相关文章:
- 删除Highmaps的放大/缩小功能
- 在放大/缩小图像的同时平移图像上的圆
- 具有放大/缩小过渡效果的全屏滑块
- 如何在 Javascript 中禁用放大/缩小按钮
- 有没有办法在Highcharts中实现“n个月”的放大/缩小
- 放大/缩小时的视点大小
- 在动态创建的 svg 元素上滚动鼠标时放大/缩小
- 使用RapaelJS放大/缩小逻辑
- 放大/缩小与更改分辨率相同
- 图像放大/缩小无法正确定位图像
- 放大 - 缩小无法正常工作
- 如何将放大/缩小的背景图像添加到sigma.js中
- 使用snap.svg IE和EDGE网络浏览器快速悬停,放大/缩小动画
- 使用snap.svg在悬停时放大/缩小animate
- 如何在调整大小的DIV中居中并放大/缩小图像
- 放大/缩小屏蔽UI图表
- 如何将谷歌地图中的放大/缩小限制为给定的指定值
- 放大缩小多张照片
- 放大/缩小干扰画布绘制位置
- 谷歌地图:放大/缩小与平移到特定点,如maps.google.com上下文菜单