jQuery 浮云相册展示插件 (jQuery Clouds Albums Plus)

单个图片效果

• 
• 

组图效果之一

• 
• 
• 
• 
• 
• 
• 
• 
• 

所需的文件调用 代码:

<script type="text/javascript" src="js/jQuery.js"></script>

<script type="text/javascript" src="js/jquery.clouds.albums.js"></script>

<script type="text/javascript" src="highslide/highslide.js"></script>

 

HTML 代码：

<div ></a></li>
</ul> 
</div>

 

CSS 代码：

.moveShow{position: relative; top:0; left:0;overflow: hidden;}
.moveShowBox { position: absolute; top:0; left:0; }
.demo2 li{float:left; width:200px; height:200px; border:1px solid #000; overflow:hidden; }

 

JavaScript 代码：

<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.wrapperClassName = 'wide-border';
hs.fadeInOut = true;

$(function(){
     $('#demo2 li').synchroMove({complete:completeDo}) ;
/* 完整的例子: $('#demo2 li').synchroMove({speed:'slow',complete:completeDo}) ;*/
/* 其中，参数 speed 的值有: slow , normal , fast*/ });

function completeDo(){ /*此函数控制鼠标点击图片后、弹出的效果*/
     $('#demo2 a').click(function(){
        hs.expand(this);
        return false;
     });
};

</script>

组图效果之二

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

所需的文件调用 代码:

<script type="text/javascript" src="js/jQuery.js"></script>

<script type="text/javascript" src="js/jquery.clouds.albums.js"></script>

<script type="text/javascript" src="highslide/highslide.js"></script>

 

HTML 代码：

<div ></a></li>
</ul> 
</div>

 

CSS 代码：

.moveShow{position: relative; top:0; left:0;overflow: hidden;}
.moveShowBox { position: absolute; top:0; left:0; }
.demo3 li{float:left;width:100px; height:100px; border:1px solid #000; overflow:hidden; }

 

JavaScript 代码：

<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.wrapperClassName = 'wide-border';
hs.fadeInOut = true;

$(function(){
     $('#demo3 li').synchroMove({complete:completeDo}) ;
});

function completeDo(){
     $('#demo3 a').click(function(){
        hs.expand(this);
        return false;
     });
};

</script>