js实现照片墙功能
时间：2014-05-01 22:44:42
收藏：0
阅读：626
用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="‘+smallpic[i]+‘" style="-moz-transform:rotate(-‘+angle+‘deg); -webkit-transform:rotate(-‘+angle+‘deg);"/></li>‘); }else{ imgsArray.push(‘<li><img id="img‘+i+‘" src="‘+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="‘+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>
评论（0）