JavaScript 照片墙。。。 _博文列表

JavaScript 照片墙。。。

网络 2013/2/18 21:50:50
前几天学习了动画和拖拽等原理。现在可以实践用上。先写一个照片墙。以后再补充一个可以拖拽交换板块的桌面效果应用。
1.布局转换
布局转换是一项重要的技巧。现代的web页面，都是通过 css 控制样式。js控制行为。可是 js 操作DOM的时候，改变其的位置属性，通常需要改变的元素是绝对定位。一些 “飘逸”的布局，是不可能一个个给其加绝对定位的属性。 css 的浮动布局，才能做到飘逸的方式，而css又不能写成绝对定位。
因此，js 和 css 各自做各自擅长的事情。通过布局转换。使布局的时候用 css，操作的时候用js。
简单来说，布局转换的原理就是：
先不用 css 给元素加定位，通过其的float属性，让元素自然的浮动。然后用 js 的位置属性，记录这些元素的位置。再通过记录的这些位置，给元素加上绝对定位。剩下操作元素，就和 js 操作定位元素一回事了。
```
window.onload = function(){ 
    var oUl = document.getElementById('ul1'); 
    var oLi = oUl.getElementsByTagName('li'); 
    //通过js取位置的值，然后付给元素 
    for (var i = 0; i < oLi.length; i++) { 
        oLi[i].style.left = oLi[i].offsetLeft + 'px'; 
        oLi[i].style.top  = oLi[i].offsetTop + 'px'; 
        oLi[i].style.position = 'absolute'; 
    }; 
}
```
执行上述代码。可以看到，每个元素都添加了 position 绝对定位属性。可是页面上却是所有 div 聚集成为了一个。产生这样的原因，是每一次循环，都给一个加位置属性，然后加定位属性。下一个还没有循环的，就因其本身是浮动的元素，就会占据上一个加定位属性而脱离文档流的元素位置。然后下一次，它和上面的过程一致，最终就导致所有的元素叠在一起。解决的办法是，先给物体加位置属性值，再做一个循环，给每个物体元素加定位属性。
```
window.onload = function(){ 
    var oUl = document.getElementById('ul1'); 
    var oLi = oUl.getElementsByTagName('li'); 
    //通过js取位置的值，然后付给元素 
    for(var i = 0; i < oLi.length; i++) { 
        oLi[i].style.left = oLi[i].offsetLeft + 'px'; 
        oLi[i].style.top  = oLi[i].offsetTop + 'px'; 
    } 
    //给元素加 定位属性 
    for(var i = 0; i < oLi.length; i++){ 
        oLi[i].style.position = 'absolute'; 
    } 
                                                     
}
```
2.照片墙
通过布局转换，我们就可以制作一个照片墙的应用。主要用到之前的运动框架 Move.js 。
原理就是通过 css 布局一个浮动的 img，然后通过 js 布局转换，再让鼠标滑入滑出的时候，改变照片的大小。
从中心改变照片大小有很多方式，这里采用一种简单的方式。即给需要变大的元素宽和高都增加，再给其加上margin的负值。
```
window.onload = function(){ 
        var oDiv = document.getElementById('div1'); 
        oDiv.onmouseover = function(){ 
            Move(this,{'width':200,'height':200,'marginLeft':-50,'marginTop':-50}); 
        } 
        oDiv.onmouseout = function(){ 
            Move(this,{'width':100,'height':100,'marginLeft':0,'marginTop':0}); 
        } 
                                   
    }
```
这样写，有一个小问题。因为运动框架中的同时运动。如果某些动作先完成了，那么改动作就停止。另外的动作还会继续。如果某个动作改变比较小，就会出现前后动作的感觉。至于这么解决，还没想出来。
3.照片墙
先用 css 浮动布局，然后用 js 布局转换。给元素添加定位属性。
添加动画。
这样做有一个小问题，就是，因为层级关系，前面的图片，总是从后面出来，会被层级高的覆盖。解决方案是，先设定一个变量 minIndex用来保存最小 z-index。每次滑入一个加最小 minIndex 自己增加，赋给当前的元素。使的每次滑入的元素，z-index的层级都是最高的。
```
window.onload = function(){ 
    var oUl = document.getElementById('ul1'); 
    var aLi = oUl.getElementsByTagName('li'); 
    var minIndex = 2; 
    //布局转换 
    for(var i = 0;i < aLi.length;i++){ 
        aLi[i].style.left = aLi[i].offsetLeft + 'px'; 
        aLi[i].style.top = aLi[i].offsetTop + 'px'; 
    } 
    for(var i = 0 ;i < aLi.length;i++){ 
        aLi[i].style.position = 'absolute'; 
        aLi[i].style.margin='0'; 
    } 
    //添加动画 
    for(var i = 0;i < aLi.length;i++){ 
        aLi[i].onmouseover = function(){ 
            this.style.zIndex = minIndex++; 
            Move(this,{'width':200,'height':200,'marginLeft':-50,'marginTop':-50}); 
        } 
        aLi[i].onmouseout = function(){ 
            Move(this,{'width':100,'height':100,'marginLeft':0,'marginTop':0}); 
        } 
    }
```
阅读(5932) 分享(0)

上一篇: 无
下一篇: 什么是XSS攻击