讲一下大致思路吧，希望能帮到你
通常来说，元素id要求是唯一的，虽然不唯一也不会报错，但可能导致代码得不到你想要的效果。你在for循环里面定义了 id="blue2" 这是不合理的。
你不能在每个元素上统一设置 transform, 因为这样的话一变全都变了，区分不了。
for循环你能拿到索引 index，你可以根据index拿到当前展示的元素，那么 通过 index+1就能拿到下一个元素。注意，需要判断是否存在下一个元素
针对当前元素做缩小处理，下一个元素做放大处理。el.style.transform = 'scale()'
小程序的开发和原生js多多少少还是有些区别的，具体的情况需要你自己调试了。
用jq 可以轻松实现 下面的代码是 移位 +放大, 再次点击时的代码自己加
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("div").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
})
})
})
</script>
你可以让顶部导航栏和其他部分分处不同的层，然后你只需要对其他部分所处的层进行缩放处理，导航栏不动，这样就实现你的目的了。比如：<div class=head>这是顶部导航栏</div>
<div class=body>这是其他主体部分</div>
然后js代码就可以这样：
$("div.body").css({"transform":"scale(0.8)","transform-origin":"50% 0"})
