js基本的封装函数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.girray{width: 980px;width: 500px;}
.center{margin: auto;position: absolute;left: 0;right: 0;top: 0;bottom: 0;}
.pic{width: 196px;height: 100px;position: absolute;background-size: 100%; }
</style>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
init();
showpic();
//showmax(index);
var showAll=true;
var pic=$('.pic')
pic.click(function(){
if (showAll) {
var index=pic.index(this)
showmax(index)
}else{
showpic()
}
showAll=!showAll
})
//分割div
function init(){
var girray=$('.girray');
for(var i=0 ; i<25 ;i++){
var x=i%5;
var y=parseInt(i/5);
$('<div class="pic"><div class="pic1"></div></div>').css({
'left': x*196+'px',
'top': y*100+'px'
}).appendTo(girray)
};
}
//每个pic显示不同的背景图
function showpic(){
$('.pic').each(function(i){
$(this).css({'background-size':'cover','background-image':'url(img/'+i+'.jpg)'});
})
}
//显示一张大图
function showmax(index){
$('.pic').css({'background-image':'url(img/'+index+'.jpg)',"background-size":'auto'})
.each(function(i){
var x=i%5;
var y=parseInt(i/5);
$(this).css({'background-position': x*-196+'px '+y*-100+'px',
})
})

}

});
</script>
</head>
<body>
<div class="girray center">
</div>
</body>
</html>

posted @ 2017-08-08 11:16  小小小马  阅读(197)  评论(0)    收藏  举报