js实现照片墙功能

2020-11-22 20:13
阅读：638
标签：style blog class code java ext javascript color width get int
用javascript实现的照片墙功能：DEMO下载
soscw.com,搜素材
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>photowalltitle>

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">20span>
            div class="scale_panel">
                span class="r">100span>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;i5;i++){
            addPicArray(number,smallpic,bigpic);
        }
        new loadImgs(smallpic,bigpic);
        new scale(‘btn‘,‘bar‘,‘title‘); 
    });
    var addPicArray = function(number,smallpic,bigpic){
        for(var i=0;inumber;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;ithis.picNumber;i++){            
                var angle = Math.floor(Math.random()*30+1)
                if(i%2==0){
                imgsArray.push(‘‘);
                }else{
                imgsArray.push(‘‘);
                }    
                this.angleArray.push(angle);
            }
            $(‘#iw_thumbs‘).html(imgsArray.join(‘‘));
            for (var i=1;ithis.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(ithis.picNumber){i=i+1;this.showPic(i)}},
        showPic:function(i){
            var en =this;
            var picfullArray=[];
            var bigpic = en.bigpic;
            picfullArray.push(‘

‘);
            picfullArray.push(‘‘);
            picfullArray.push(‘‘);
            picfullArray.push(‘



‘);
            picfullArray.push(‘


‘);        
            $("#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>