一个动态展示图片的页面:
功能:定时从后台取数据,进行页面图片追加。对已经在页面中的图片,进行放大缩小动画展示。目前我们用于微信新关注用户头像展示。
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>抽奖</title>
<script src="../../js/jquery-1.7.2.min.js"></script>
<style>
body{
background-color:#000;
text-transform:uppercase;
color:#fff;
position: relative;
}
.img{
float:left;
margin:2px;
cursor:pointer;
opacity:0.4;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
width : 60px;
height : 60px;
}
.bigpic { position: absolute; overflow: hidden; z-index: 99; }
.bigpic img { width: 100%;opacity:1; }
</style>
</head>
<body>
<div class="bigpic" style="display: none;">
<img class="bigimg" src="" />
</div>
<div id="content" style="position: absolute;border:0;padding:0;margin-top: 10px;" >
<!-- <img src="images/1.jpg" class="img" />
<img src="images/2.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/2.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/2.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/2.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/2.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" />
<img src="images/1.jpg" class="img" /> -->
</div>
<script type="text/javascript">










