拼图图片原理 2019-03-22
2019-03-23 本文已影响8人
CondorHero
原理解释：
拼图图片原理.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拼图轮播</title>
<style>
*{
margin: 0;
padding: 0;
}
/*给每个盒子添加背景图、大小、定位*/
div {
height: 100px;
width: 100px;
border: 1px solid skyblue;
background: url(images/befu.jpg);
position: absolute;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script src = "js/jquery-1.12.3.min.js"></script>
<script>
//使用each 遍历
$("div").each(function(i){
$(this).css({
//设置默认样式
"top" : 200,
"left" : 800,
"background-position" : -i%8*100 + "px " + -parseInt(i/8)*100 + "px"
// 超级无敌大坑中间px 后面有一个空格，空格后面必须有加号。
}).delay(i*300).animate({
//设置延迟，运动目的。
"top" : parseInt(i/8)*100,
"left" : i%8*100,
},1000);
});
</script>
</body>
</html>
可能大家看不懂 animate后面的运动目的地，它的计算公式怎么来的?
特殊说明下：
我们一共把图分成八列五行使用each进行遍历的时候，编号从零开始到三十九。一共四十个盒子。我们在算目的地要求第一行0~7编号 top 为零，左边第一列0 8 16 32 编号 left 为零。以此类推第二列第二行......
得出如下公式;均除以列数就行了
top : parseInt(i/8)*100,
left : i%8*100,
代码优化，写 div 太麻烦了，使用 jQuery 批量添加 div 盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拼图轮播</title>
<style>
*{
margin: 0;
padding: 0;
}
/*给每个盒子添加背景图、大小、定位*/
div {
height: 100px;
width: 100px;
border: 1px solid skyblue;
background: url(images/befu.jpg);
position: absolute;
}
</style>
</head>
<body>
<script src = "js/jquery-1.12.3.min.js"></script>
<script>
//创建div盒子代码
for(var row = 0; row < 8;row++)
for (var col = 0; col <5 ; col++) {
var $div = $("<div></div>");
$("body").append($div);
}
$("div").each(function(i){//使用each 遍历
$(this).css({
//设置默认样式
"top" : 200,
"left" : 800,
"background-position" : -i%8*100 + "px " + -parseInt(i/8)*100 + "px"
// 超级无敌大坑中间px 后面有一个空格，空格后面必须有加号。
}).delay(i*300).animate({
//设置延迟，运动目的。
"top" : parseInt(i/8)*100,
"left" : i%8*100,
},1000);
});
</script>
</body>
</html>
