JS控制浏览器网页内容的百分比缩放

JavaScript030

JS控制浏览器网页内容的百分比缩放,第1张

你可以让顶部导航栏和其他部分分处不同的层，然后你只需要对其他部分所处的层进行缩放处理，导航栏不动，这样就实现你的目的了。比如：

<div class=head>这是顶部导航栏</div>

<div class=body>这是其他主体部分</div>

然后js代码就可以这样：

$("div.body").css({"transform":"scale(0.8)","transform-origin":"50% 0"})

var screen = window.screen//获取分辨率

screen.width；//获取分辨率的宽度

screen.height；//获取分辨率的高度

//页面缩放比例设置方法

document.getElementsByTagName('body')[0].style.zoom=0.67//该方法将页面设置比例调整为67%

看看如下示例是否符合你的需求：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html charset=utf-8" />

</head>

<style type="text/css">

div{width: 30pxheight: 100pxborder: 1px solid #cccbackground: #999}

</style>

<body>

    <div onmousewheel="bsadapt(this)"></div>

</body>

<script type="text/javascript">

function bsadapt(o){

    var zoom = parseInt(o.style.zoom, 10)||100

    zoom += event.wheelDelta/12

    if(zoom > 0){

        o.style.zoom = zoom+'%' 

    }

    return false

}

</script>

</html>

鼠标移动到区域，然后滚动滚动，可以放大、缩小div。想要放大或者缩小到固定大小的话，直接传递数值即可的！

有任何疑问，欢迎追问......