代码改变世界

最简单的手风琴效果 —— 无动画

2013-04-16 20:39  MoltBoy  阅读(497)  评论(0)  编辑  收藏  举报

　　试验CSS效果时，顺便试试这样的效果，居然可以实现类似的手风琴效果，只是不是具体控制，因而没有动画效果！纯属娱乐，毫无技术含量！

<html>
<head>
    <title></title>
    <style type="text/css">
        body{margin: 0;padding: 0;}
        table{margin:20px auto;width:730px; hieght:200px;border: #F00 solid 2px;padding: 3px;}
        table td{width: 50px;height: 200px;}
        .on{width: 280px;}
    </style>
</head>
<body>
    <table >
        <tr>
            <td class="on" background="http://images.cnblogs.com/cnblogs_com/moltboy/471235/o_r1.jpg"></td>
            <td class="" background="http://images.cnblogs.com/cnblogs_com/moltboy/471235/o_r2.jpg"></td>
            <td class="" background="http://images.cnblogs.com/cnblogs_com/moltboy/471235/o_r3.jpg"></td>
            <td class="" background="http://images.cnblogs.com/cnblogs_com/moltboy/471235/o_r4.jpg"></td>
            <td class="" background="http://images.cnblogs.com/cnblogs_com/moltboy/471235/o_r5.jpg"></td>
            <td class="" background="http://images.cnblogs.com/cnblogs_com/moltboy/471235/o_r6.jpg"></td>
            <td class="" background="http://images.cnblogs.com/cnblogs_com/moltboy/471235/o_r1.jpg"></td>
            <td class="" background="http://images.cnblogs.com/cnblogs_com/moltboy/471235/o_r4.jpg"></td>
            <td class="" background="http://images.cnblogs.com/cnblogs_com/moltboy/471235/o_r6.jpg"></td>
            <td class="" background="http://images.cnblogs.com/cnblogs_com/moltboy/471235/o_r5.jpg"></td>
        </tr>
    </table>

    <script type="text/javascript">
        function addHandler(element, eventType, eventHandler){ 
            element.addEventListener ? element.addEventListener(eventType, eventHandler, false) :
            element.attachEvent ? element.attachEvent(("on" + eventType), eventHandler) : (element["on" + eventType] = eventHandler);
        }

        function each(arr, callback, thisp){        //traverse array
            if(arr.forEach){            //check Array function 
                arr.forEach(callback, thisp);
            }else{
                for(var i=0, len=arr.length; i < len; ++i){
                    callback.call(thisp, arr[i], i, arr);
                }
            }
        }

        addHandler(window, "load", function(){    
            var getTag = function(tag){
                return document.getElementsByTagName(tag);
            };

            var images = getTag("td");
            for(var i = 0, len = images.length; i < len; i++){
                addHandler(images[i], "mouseover", function(event){
                    event = window.event || event;
                    var target = event.target || event.srcElement;
                    each(images, function(o, i){
                        o.className = "";
                    });
                    target.className = "on";
                });
            }
        });
    </script>
</body>
</html>

　　复制代码后就可以直接看效果！太简单了就不说了哈