案例演示
原理
让一张大图的每一部分都能独立运动。
实现
显示图片中的一部分
前景图与背景图
<div style="
background-image: url(img/10.jpg);
width: 196px;
height: 100px;
background-position: 0px -100px;"></div>
用background-position可以定位显示图片中的一部分。
显示25张小图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.1.0.min.js" ></script>
<style>
.item{
background-image: url(img/10.jpg);
width: 196px;
height: 100px;
}
</style>
<script type="text/javascript">
$(function(){
var gallary = $(".gallary");
for(var i = 0; i < 25; i++){
$('<div class="item"></div>')
.css("background-position", function(){
var x = parseInt(i % 5);
var y = parseInt(i / 5);
return x*-196+"px "+y*-100+"px";
})
.appendTo(gallary);
}
});
</script>
</head>
<body>
<div class="gallary"></div>
</body>
</html>
通过定位显示完整的图片
float
position
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.1.0.min.js" ></script>
<style>
.gallary{
width: 980px;
height: 500px;
}
.item{
background-image: url(img/10.jpg);
width: 196px;
height: 100px;
position: absolute;
}
</style>
<script type="text/javascript">
$(function(){
var gallary = $(".gallary");
for(var i = 0; i < 25; i++){
var x = parseInt(i % 5);
var y = parseInt(i / 5);
$('<div class="item"></div>')
.css("background-position", function(){
return x*-196+"px "+y*-100+"px";
})
.css("left", function(){
return x*196 + "px";
})
.css("top", function(){
return y*100 + "px";
})`
.appendTo(gallary);
}
});
</script>
</head>
<body>
<div class="gallary"></div>
</body>
</html>
显示所有图片
乱序隐藏
var items = gallary.find(".item");
items.click(function(){
items.each(function(index){
var r = Math.random() * 2700 + 300; // [300, 3000)
$(this).delay(r).animate({"opacity": "0.1"}, 800);
})
});
显示选中图片
作业
[案例]幻灯片切换特效