以下是效果图
下面我做一个简单的布局
<style type="text/css">
*{ margin: 0; padding: 0;}
.box{
width: 100%;
position: absolute;
left: 0;
bottom: 0;
text-align: center;
}
.box img{
width: 64px;
height: 64px;
}
</style>
<body>
<div class="box" id="box">
<img src="1.png"/>
<img src="2.png"/>
<img src="3.png"/>
<img src="4.png"/>
<img src="5.png"/>
</div>
</body>
<script>
//封装获取元素到document顶部的垂直距离；
function getPos(obj){
var l=0;
var t=0;
while(obj){
l+=obj.offsetLeft;
t+=obj.offsetTop;
obj=obj.offsetParent;
}
return {left:l,top:t};
}
window.onload=function(){
var oBox=document.getElementByID('box');
var aImg=document.getElementsBYTagName('img');
ducument.onmousemove=function(ev){
var oEvent=ev||event;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
for(var i=0;i<aImg.length;i++){
var oTop=getPos(aImg[i]).top+aImg[i].offsetHeight/2;//在复杂的布局中可能存在父级有定位的情况，用函数获取到document顶部的垂直距离最为准确；
var a=oTop-oEvent.clientY-scrollTop;//像我这种布局简单的滚动条的距离可以减可以不减，如果在页面复杂的布局中减了是以防万一的；
var oLeft=getPos(aImg[i]).left+aImg[i].offsetWidth/2;
var b=oLeft-oEvent.clientX-scollLeft;
var c=Math.sqrt(a*a+b*b);//根据勾股定理计算，详细见顶部图2；
var scale=1-c/500; //这个500是自己任意定义的，求一个比例，当c递减的时候scale递增，c=0时，scale=1，相当于100%；
(scale<0.5)&&(scale=0.5);//当c>250时，让这个比例不变，这个0.5也是自己定义的，可以根据设计图所需要的最小尺寸来定义；
aImg[i].style.width=scale*128+'px';
aImg[i].style.height=scale*128+'px';
//这个128是用原来的宽高64/0.5得来的，128就是最大的宽高；当c>250时，宽高不变，c<250时，宽高递增，直到100%，所以250位感应距离，这个感应距离可以自定义；
}
}
}
</script>
814
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
