例子见附件。
就是自适应显示图片的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery图片平铺效果制作网页背景图片平铺代码</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}
body {
font-family: Consolas, arial, "宋体";
}
h2 {
font-size: 20px;
text-align: center;
height: 32px;
margin: 30px 0 0 0;
}
.pic {
width: 920px;
margin: 0 auto;
zoom: 1;
}
.pic:after {
content: '';
display: table;
clear: both;
}
.pic li {
float: left;
width: 200px;
height: 200px;
margin: 20px 10px 0;
display: inline;
}
.default {
border: 5px solid #d9534f;
}
.default img {
width: 200px;
height: 200px;
vertical-align: top;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jqPicAuto.js"></script>
<script type="text/javascript">
$(function() {
$('.a img').jqPicAutoY({
width: 200,
height: 200,
zoom: 2,
after: function(imgObj) {
imgObj.css('opacity', 0).animate({
opacity: 1
}, 1000);
}
});
$('.b img').jqPicAutoX({
width: 200,
height: 200,
zoom: 2,
after: function(imgObj) {
imgObj.css('opacity', 0).animate({
opacity: 1
}, 1000);
}
});
$('.c img').jqPicAutoR({
width: 200,
height: 200,
zoom: 2,
after: function(imgObj) {
imgObj.css('opacity', 0).animate({
opacity: 1
}, 1000);
}
});
$('.d img').jqPicAutoZ({
width: 200,
height: 200,
zoom: 2,
after: function(imgObj) {
imgObj.css('opacity', 0).animate({
opacity: 1
}, 1000);
}
});
});
</script>
</head>
<body>
<h2>默认效果：图片对比下</h2>
<ul class="pic">
<li class="default">
<a href="#"><img src="images/1.jpg"></a>
</li>
<li class="default">
<a href="#"><img src="images/2.jpg"></a>
</li>
<li class="default">
<a href="#"><img src="images/3.jpg"></a>
</li>
<li class="default">
<a href="#"><img src="images/4.jpg"></a>
</li>
</ul>
<h2>使用效果：圆形 放大</h2>
<ul class="pic">
<li class="a">
<a href="#"><img src="images/1.jpg"></a>
</li>
<li class="a">
<a href="#"><img src="images/2.jpg"></a>
</li>
<li class="a">
<a href="#"><img src="images/3.jpg"></a>
</li>
<li class="a">
<a href="#"><img src="images/4.jpg"></a>
</li>
</ul>
<h2>默认效果：圆形 不放大</h2>
<ul class="pic">
<li class="b">
<a href="#"><img src="images/1.jpg"></a>
</li>
<li class="b">
<a href="#"><img src="images/2.jpg"></a>
</li>
<li class="b">
<a href="#"><img src="images/3.jpg"></a>
</li>
<li class="b">
<a href="#"><img src="images/4.jpg"></a>
</li>
</ul>
<h2>使用效果：矩形 放大</h2>
<ul class="pic">
<li class="c">
<a href="#"><img src="images/1.jpg"></a>
</li>
<li class="c">
<a href="#"><img src="images/2.jpg"></a>
</li>
<li class="c">
<a href="#"><img src="images/3.jpg"></a>
</li>
<li class="c">
<a href="#"><img src="images/4.jpg"></a>
</li>
</ul>
<h2>使用效果：矩形 不放大</h2>
<ul class="pic">
<li class="d">
<a href="#"><img src="images/1.jpg"></a>
</li>
<li class="d">
<a href="#"><img src="images/2.jpg"></a>
</li>
<li class="d">
<a href="#"><img src="images/3.jpg"></a>
</li>
<li class="d">
<a href="#"><img src="images/4.jpg"></a>
</li>
</ul>
</body>
</html>