首页 > 代码库 > js实现照片墙功能

js实现照片墙功能

用javascript实现的照片墙功能:DEMO下载

 

 

 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8" />
<title>photowall</title>

<style>
.iw_wrapper{width:90%;margin:0 auto;position:relative;}
ul{list-style-type:none}
ul.iw_thumbs li{float:left;}

ul.iw_thumbs li:nth-child(even){margin:20px;}
ul.iw_thumbs li:nth-child(1n){margin:20px;} 

ul.iw_thumbs li img{border:7px solid #fff;cursor:pointer;position:relative;-moz-box-shadow:1px 1px 1px #aaa;-webkit-box-shadow:1px 1px 1px #aaa;box-shadow:1px 1px 1px #aaa;}
ul.iw_thumbs li img:hover{-moz-box-shadow:1px 1px 7px #777;-webkit-box-shadow:1px 1px 7px #777;box-shadow:1px 1px 7px #777;}
ul.iw_thumbs li:nth-child(even) img{height:80px;}
ul.iw_thumbs li:nth-child(odd) img{height:80px;}
.iw_close{position:absolute;top:10px;right:10px;background:#f0f0f0 url(images/close.gif) no-repeat center center;width:18px;height:18px;cursor:pointer;}


.scale_panel{font-size:12px;color:#999;width:900px;position:absolute;line-height:18px;left:80px;top:-0px;}
.scale_panel .r{float:right;}
.scale span{background:url(images/scroll.gif) no-repeat;width:8px;height:16px;position:absolute;left:-2px;top:-1px;cursor:pointer;}
.scale{background:url(images/red.gif) repeat-x 0 100%;border-left:1px #83BBD9 solid;border-right:1px red solid;width:900px;height:10px;position:relative;font-size:0px;}
.scale div{background:url(images/blue.gif) repeat-x;width:0px;position:absolute;width:0;left:0;height:5px;bottom:0;}
li{font-size:16px;line-height:50px;position:relative;height:50px;list-style:none;color:red}

.arrow_left{background-image:url(images/img_preview_ic.gif);background-position:0 0;width:30px;height:35px;cursor:pointer;}
.arrow_left:hover{background-image:url(images/img_preview_ic.gif);background-position:71px 0;width:30px;height:35px;cursor:pointer;}
.arrow_right{background-image:url(images/img_preview_ic.gif);background-position:0 -40px;width:30px;height:35px;cursor:pointer;}
.arrow_right:hover{background-image:url(images/img_preview_ic.gif);background-position:72px -40px;width:30px;height:35px;cursor:pointer;}

</style>
</head>
<body>         
 <div id="picfull" style="display:none;"></div>
 <div  id="wall_content" class="content" style="position:relative;">    
  <div style="margin: 20px auto; width:200px; font-size: 60px;">照片墙</div> 
  <div style="margin: 20px auto; width:1100px;">
       <ul>
         <li id="scalePanel">密度:<span id="title">20</span>
            <div class="scale_panel">
                <span class="r">100</span>0
                <div class="scale" id="bar">
                    <div style="width:20%"></div>
                    <span id="btn" style="left:20%;"></span>
                </div> 
            </div> 
         </li>
     </ul>
  </div>
  <div class="iw_wrapper"><ul class="iw_thumbs" id="iw_thumbs"></ul></div>     
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){ 
        var number=30,smallpic = [],bigpic=[];    
        for(var i=0;i<5;i++){
            addPicArray(number,smallpic,bigpic);
        }
        new loadImgs(smallpic,bigpic);
        new scale(btn,bar,title); 
    });
    var addPicArray = function(number,smallpic,bigpic){
        for(var i=0;i<number;i++){
            smallpic.push(images/small/+(i+1)+.jpg);
            bigpic.push(images/big/+(i+1)+.jpg);        
        }
    }
    var loadImgs=function(smallpic,bigpic){
        this.angleArray = [];
        this.picNumber = smallpic.length;
        this.bigpic = bigpic;
        this.smallpic = smallpic;
        this.load();
    }
    loadImgs.prototype={
        load:function(){
            var imgsArray=[],smallpic = this.smallpic;
            for (var i=1;i<this.picNumber;i++){            
                var angle = Math.floor(Math.random()*30+1)
                if(i%2==0){
                imgsArray.push(<li><img  id="img+i+" src="http://www.mamicode.com/+smallpic[i]+" style="-moz-transform:rotate(-+angle+deg); -webkit-transform:rotate(-+angle+deg);"/></li>);
                }else{
                imgsArray.push(<li><img id="img+i+" src="http://www.mamicode.com/+smallpic[i]+" style="-moz-transform:rotate(+angle+deg); -webkit-transform:rotate(+angle+deg);"/></li>);
                }    
                this.angleArray.push(angle);
            }
            $(#iw_thumbs).html(imgsArray.join(‘‘));
            for (var i=1;i<this.picNumber;i++){
                this.enter(i);
            }
        },
        enter:function(i){
            var en =this;
            var angle = this.angleArray[i-1];
            var $img = $("#img"+i);
            $img.hover(
                  function () {$img.css({"-moz-transform":"rotate(0deg)"},{"-webkit-transform":"rotate(0deg)"});},
                  function () {
                    if(i%2==0){
                        $img.css({"-moz-transform":"rotate(-"+angle+"deg)"},{"-webkit-transform":"rotate(-"+angle+"deg)"});
                    }else{
                        $img.css({"-moz-transform":"rotate("+angle+"deg)"},{"-webkit-transform":"rotate("+angle+"deg)"});
                    }
                  }
            );
            $("#img"+i).click (function(){en.showPic(i);en.showMsg()});
        },
        showMsg:function(){$(#picfull).fadeIn(1000);$(#wall_content).hide()},
        hideMsg:function(){    $(#picfull).hide();$(#wall_content).fadeIn(500)},
        toLeftImg:function(i){if(i>1){i=i-1;this.showPic(i);}},
        toRightImg:function(i){if(i<this.picNumber){i=i+1;this.showPic(i)}},
        showPic:function(i){
            var en =this;
            var picfullArray=[];
            var bigpic = en.bigpic;
            picfullArray.push(<div style="background: none repeat scroll 0 0 #000000;"><div>);
            picfullArray.push(<table style="width:100%;margin:0 auto;"><tr><td width="5%" align="right"><div id="arrowLeft" class="arrow_left"></div></td>);
            picfullArray.push(<td width="80%"><img id="bigImg" src="http://www.mamicode.com/+bigpic[i]+" style="display:block; height:+(window.innerHeight-22)+px;margin:0 auto;"></td>);
            picfullArray.push(<td width="5%" align="left"><div id="arrow_right" class="arrow_right"></div></td></tr></table>);
            picfullArray.push(</div><div id="iw_ribbon" class="iw_ribbon"><span class="iw_close"></span></div></div>);        
            $("#picfull").html(picfullArray.join(‘‘));    
            $(#arrowLeft).click(function (){en.toLeftImg(i);});
            $(#arrow_right).click(function (){en.toRightImg(i);});
            $(#iw_ribbon).click(function (){en.hideMsg();});
        }
    }
    
     var scale=function (btn,bar,title){
        this.btn=document.getElementById(btn);
        this.bar=document.getElementById(bar);
        this.title=document.getElementById(title);
        this.step=this.bar.getElementsByTagName("DIV")[0];
        this.init();
    };
    
    scale.prototype={
        init:function (){
            var f=this,g=document,b=window,m=Math;
            var btn_left = f.btn.getBoundingClientRect().left-f.btn.offsetLeft+2;
            
            f.btn.onmousedown=function (e){
                var x=(e||b.event).clientX;
                var l=this.offsetLeft;
                var max=f.bar.offsetWidth-this.offsetWidth;
                g.onmousemove=function (e){
                    var thisX=(e||b.event).clientX;
                    var to=m.min(max,m.max(-2,l+(thisX-x)));
                    f.btn.style.left=to+px;
                    f.ondrag(m.round(m.max(0,to/max)*100),to);
                    b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
                };
                g.onmouseup=new Function(this.onmousemove=null);
            };
            
            f.bar.onmousedown=function (e){
                var max=f.bar.offsetWidth-f.btn.offsetWidth;
                var thisX=(e||b.event).clientX;
                var to=m.min(max,m.max(-2,(thisX-btn_left)));
                f.btn.style.left=to+px;
                f.ondrag(m.round(m.max(0,to/max)*100),to);
            }
        },
        ondrag:function (pos,x){
            this.step.style.width=Math.max(0,x)+px;
            this.title.innerHTML=pos;
            $(ul.iw_thumbs li:nth-child(even)).css("margin",pos+"px");
            $(ul.iw_thumbs li:nth-child(1n)).css("margin",pos+"px");
            $(ul.iw_thumbs li:nth-child(even) img).css("height",(parseFloat(pos)*0.3+80)+"px");
            $(ul.iw_thumbs li:nth-child(odd) img).css("height",(parseFloat(pos)*0.3+80)+"px");
        }
    }
    
</script>
</body>
</html>