求源碼
healen
2014-07-22
1 回答
舉報(bào)
0/150
提交
取消
求源碼
2014-07-22
舉報(bào)
2016-09-17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" >
<title>web相冊(cè)</title>
<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
body{background: black;}
ul{list-style: none;}
ul li{width: 100px;height: 100px;float: left;overflow: hidden;}
</style>
</head>
<body>
<ul id="contain">
</ul>
<script type="text/javascript">
var photoSize = 12;
var zWin = $(window);
var render = function(){
var padding = 2;
var winWidth=zWin.width()
var onePho = Math.floor((winWidth-padding*3)/4);
var str='';
for(var i=1;i<=photoSize;i++){
var p=padding;
if(i%4==1){
p=0
}
var imgSrc='img/'+i+'.jpg'
str+='<li style="width:'+onePho+'px;height:'+onePho+'px;padding-top:'+padding+'px;padding-left:'+p+'px"><canvas id="cvs_'+i+'"></canvas></li>';
var imageObj = new Image();
imageObj.index=i;
imageObj.onload=function(){
var cvs=$('#cvs_'+this.index)[0].getContext('2d');
cvs.width=this.width;
cvs.height=this.height;
cvs.drawImage(this,0,0)
}
imageObj.src=imgSrc
}
$('#contain').html(str)
}
render()
</script>
</body>
</html>