javascript 视差滚动
今天看到有人推荐 有js视差滚动效果的网站，其实视差滚动原理非常简单，无非把不同dom对象设置不同的移动速度，这样同时移动时可以非常明显的纵深感。
以我的上篇练习 javascript 随机展示头像 为基础稍微添加一段代码就可以实现一个视差滚动。
直接上代码(html，全) 代码打包地址
View Code
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>
</title>
<style type="text/css">
html,body{margin: 0;padding:0;height:100%;width:100%;overflow:hidden;}
ul,li{margin:0;padding:0;}
ul{position:relative;width:100%;height:100%;}
li{border:4px solid gray;border-radius:3px;list-style:none;}
img{width:100%;height:100%;}
</style>
</head>
<body>
<ul>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
</ul>
<script type="text/javascript">
window.onload=function(){
var ul=document.getElementsByTagName('ul')[0];
var li=ul.getElementsByTagName('li');
var data=[];
for(var i=0,l=li.length;i<l;i++){
var s=li[i].style;
s.position = 'absolute';
s.zIndex = Math.floor(Math.random()*90) + 10;
s.width = s.height = s.zIndex + 'px';
s.left = Math.floor(Math.random()*(ul.offsetWidth-s.zIndex)) + 'px';
s.top = Math.floor(Math.random()*(ul.offsetHeight-s.zIndex)) + 'px';
s.opacity = s.zIndex / 100;
s.filter = 'alpha(opacity=' + s.zIndex + ')';
s.alpha = s.zIndex;
var obj = {
e:li[i],
l:parseInt(s.left),
t:parseInt(s.top),
s:parseInt(s.zIndex)
}
data.push(obj);
}
ul.onmousemove = function (e){
for(var j in data){
var step = data[j].s * 2;
var numx = parseInt( ( ul.offsetWidth/2 - e.clientX) * step / ul.offsetWidth );
var numy = parseInt( ( ul.offsetHeight/2 - e.clientY) * step / ul.offsetHeight );
data[j].e.style.left = data[j].l - numx + 'px';
data[j].e.style.top = data[j].t - numy + 'px';
console.log(numx);
}
}
}
</script>
</body>
</html>
新加代码段1
var data=[];
......
var obj = {
e:li[i],
l:parseInt(s.left),
t:parseInt(s.top),
s:parseInt(s.zIndex)
}
data.push(obj);
申请数组data，遍历时保存li的left top 和 index，动画时用到
新加代码段2
ul.onmousemove = function (e){
for(var j in data){
var step = data[j].s * 2;
var numx = parseInt( ( ul.offsetWidth/2 - e.clientX) * step / ul.offsetWidth );
var numy = parseInt( ( ul.offsetHeight/2 - e.clientY) * step / ul.offsetHeight );
data[j].e.style.left = data[j].l - numx + 'px';
data[j].e.style.top = data[j].t - numy + 'px';
//console.log(numx);
}
}
这里关键地就是numx和numy；涉及到一个数学算法，不过不难理解，就是一个一元二次方程；num的大小就是鼠标相对页面的大小的固定比例。
ps：好像加不了demo页面 不知道大家有没有知道怎么加的。
