作品共享 仿google艺术家 界面 相册效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <!--<script src="../mootools-1.2.2-core-nc.js" type="text/javascript" charset="utf-8"></script>-->
        <script src="http://mootools.net/download/get/mootools-1.2.3-core-yc.js" type="text/javascript" charset="utf-8"></script>
        
    </head>
    <body>
        
<style>
        html, body, div, h1, h2, h3, h4, h5, h6, p, img, dl, dt, dd, ol, ul, li, table, caption, tbody, tfoot, thead, tr, th, td, form, fieldset, embed, object, applet {
            border: 0 none;
            margin: 0;
            padding: 0;
        }
        body {
            color: #000000;
            font-family: Arial, sans-serif;
            font-size: 62.5%;
        }
        #container {
            font-size: 1.3em;
            margin: 0 auto;
            
            text-align: left;
            width: 980px;
            }
        #filmstrip {
                background: transparent url(http://www.google.cn/help/ig/art/images/film_bg.jpg) repeat-x scroll 0 0;
                clear: both;
                height: 138px;
                width: 968px;
            }
        #filmstrip a#leftarrow {
                background: transparent url(http://www.google.cn/help/ig/art/images/arrow_left.jpg) repeat scroll left top;
                height: 137px;
                margin: 0;
                padding: 0;
                width: 29px;
            }        #filmstrip a#leftarrow.on:hover, #filmstrip a#rightarrow.on:hover {
                background-position: -58px 50%;
            }
        #filmstrip a#leftarrow.on, #filmstrip a#rightarrow.on {
                background-position: -29px 50%;
                cursor: pointer;
            }
        #filmstrip a, #filmstrip a:visited {
                color: #0000CC;
                display: block;
                float: left;
                margin-top: 1px;
                text-align: center;
            }
        div.clip {
                float: left;
                height: 136px;
                overflow:hidden;
                float:left;
                position: relative;
                width: 910px;
                z-index: 2;
            }
        div#thumblist {
                line-height: 1.1em;
                position: absolute;
                z-index: 1;
            }
        #filmstrip a.selected, #filmstrip a.selected:visited {
                background: #FFFFFF none repeat scroll 0 0;
                border-left: 1px solid #CCCCCC;
                border-right: 1px solid #CCCCCC;
                color: #000000;
                font-weight: bold;
                text-decoration: none;
                width: 78px;
            }
        #filmstrip a, #filmstrip a:visited {
                color: #0000CC;
                display: block;
                float: left;
                height: 127px;
                margin-top: 1px;
                padding: 10px;
                text-align: center;
                width: 80px;
            }
        #filmstrip a span {
                display: block;
            }
        #filmstrip a span img {
                border: 1px solid #CCCCCC;
                margin-bottom: 7px;
            }
                    #filmstrip a#rightarrow {
                background: transparent url(http://www.google.cn/help/ig/art/images/arrow_right.jpg) repeat scroll left top;
                float: left;
                height: 137px;
                margin: 0;
                padding: 0;
                width: 29px;
            }
        .preview{
                padding: 30px 180px;
                position:absolute;
            }</style>
<div id="container">    
<div id="filmstrip">
    <a onclick="" id="leftarrow" class=""></a>
    <div class="clip" style="overfo">
        <div id="thumblist" style="left: 0px;">
                        
        </div>
    </div><a id="rightarrow" class="on" onclick=""></a>
</div><div id="previewContainer" class="visible preview">
    <img  width="500" height="400" id="imgFull" title="" alt="" class="logo" src="../6.jpg"/> 
    <p id="previewAbout"><b>关于此艺术家</b></p>
</div>
</div>
<script>
var tuPian_obj={
    "BAAAA": {
        "id": "BAAAA",
        "name": "三等分1",
        "src": "http://img1.cache.netease.com/catchpic/1/1B/1BE0A7272DE5F94DFD95C074A7A98778.jpg",
        "content2": "0"
    },
    "BAAAb": {
        "id": "BAAAb",
        "name": "飞机",
        "src": "http://img1.cache.netease.com/catchpic/8/88/881329945CF8CD3947FAD1F6BDF607A0.jpg",
        "content2": "0"
    },
    "BAAAC": {
        "id": "BAAAC",
        "name": "李鼎荣",
        "src": "http://img1.cache.netease.com/catchpic/B/B1/B13CADCAFD604447C69B13B0977ECD3D.jpg",
        "content2": "0"
    },
    "BAAAd": {
        "id": "BAAAd",
        "name": "三等分2",
        "src": "http://img1.cache.netease.com/cnews/2009/6/19/2009061909555425452.jpg",
        "content2": "0"
    }
}var showZhaoPian=function(){
    var moban_xt='<a onclick="" href="#"><span><img  width="68" height="68" title="{name}" alt="{name}" src="{src}"/></span>{name}</a>';
    //var moban_dt='<img width="500" height="400" id="" title="{name}" alt="{name}" class="logo" src="{src}"/><p id="previewAbout"><b>{content2}</b></p>';
    //加载图片
    var numValue,thumblist = $('thumblist'),leftarrow=$('leftarrow'),rightarrow=$('rightarrow'),tuPian_obj_length=0,imgFull=$('imgFull');
    (10).times(function(){
        for (var i in tuPian_obj) {
            var c = moban_xt.substitute(tuPian_obj[i]); 
            numValue+=c+' ';
            tuPian_obj_length++;
        }
    })
    var d=new Element('div')
    d.innerHTML=numValue;
    //总left
    var num_Left= -1 * (tuPian_obj_length - 9) * 100;
    //居中数组
    var center;
    thumblist.adopt(center=d.getChildren(null,true))
    var otherL,otherR;
    otherL=center.filter(function(x){
        if(x.uid<11&&x.uid>6)return true;
    })
    otherR=center.filter(function(x){
        if(x.uid<48&&x.uid>42)return true;
    })
    center=center.filter(function(x){
        if(x.uid>10&&x.uid<43)return true;
    })otherL.each(function(x,y){
        x.onclick=function(){
                $$(".selected")[0]&&$$(".selected")[0].removeClass('selected');
                $(this).addClass("selected"),selectedUid=$(this).uid;
                imgFull.src=$(this).getElements('img')[0].src
                
                var a=new Fx.Tween(thumblist,{
                    onComplete: function(){
                        leftarrow.removeClass('on');
                    }
                });
                a.start('left', 0)
                
                return false;
            }
    })
otherR.each(function(x,y){
        x.onclick=function(){
                $$(".selected")[0]&&$$(".selected")[0].removeClass('selected');
                $(this).addClass("selected"),selectedUid=$(this).uid;
                imgFull.src=$(this).getElements('img')[0].src
                
                var a=new Fx.Tween(thumblist,{
                    onComplete: function(){
                        rightarrow.removeClass('on');
                    }
                });
                a.start('left',num_Left)
                
                return false;
            }
    })center.each(function(x,y){
        x.onclick=function(){
                $$(".selected")[0]&&$$(".selected")[0].removeClass('selected');
                $(this).addClass("selected"),selectedUid=$(this).uid;
                imgFull.src=$(this).getElements('img')[0].src
                
                var a=new Fx.Tween(thumblist,{
                    onComplete: function(){
                        if(thumblist.style.left.toInt()!=0)
                        leftarrow.addClass('on');
                        if(thumblist.style.left.toInt()!=num_Left)
                        rightarrow.addClass('on');
                    }
                });
                a.start('left', -1*y*100)
                return false;
            }
        
    })    //移动照片
    leftarrow.addEvents({
        click:function(){
            var left=thumblist.style.left;
            rightarrow.addClass('on');
            if (left.toInt() >= -300) {
                var a=new Fx.Tween(thumblist,{
                    onComplete: function(){
                        leftarrow.removeClass('on')
                    }
                });
                a.start('left', 0)
            }
            else 
                thumblist.tween('left', left.toInt() + 300)
            
            
        }
    })
    
    rightarrow.addEvents({
        click:function(){
            var left=thumblist.style.left;
            leftarrow.addClass('on');
            if(left.toInt()<=num_Left+300)thumblist.tween('left',num_Left)
            else thumblist.tween('left',left.toInt()-300)
            if (thumblist.style.left.toInt() == num_Left) {
                rightarrow.removeClass('on');
                
            }
            
        }
    })
    
}
new showZhaoPian();</script>
    </body>
</html>