/Application-of-jquery.transform

jquery.transform插件的简单应用

Primary LanguageHTML

#功能需求分析
1、一个科比的相片集，背景也用了湖人的紫金色；
2、当点击一张网格状中的照片时，会拼接成该图片的一张大图；
3、当点击大图中的任何一小块时，会把网格状的图片散布出来。


第一步：在HTML页面先加载所有图片：
为wrap_images下的每一个设置background-position，把每张大图显示在每一小块的div上，这样在16张图片拼接一起时可以完整显示一张图片。

第二步：导入外部CSS文件：



先把所有的图片集合在一起放在窗口之外：
.wrap_images div{
    position: absolute;
    left: -500px;
    width: 125px;
    height: 125px;
}

导入jQuery和jquery.transform：
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.transform-0.9.3.min_.js"></script>

利用这个函数disperse()，把图片都散布在页面上。

利用这个函数setflag()来控制点击事件

还要给每张图片绑定一个点击事件
var image_src	= $this.find('img').attr('src').replace('/thumbs','');这是大图显示时的src，用作背景图片
fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。