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 id="demo2" class="demo2">
<ul>
    <li><a href="photo/1.jpg"><img src="photo/1.jpg" width="420" height="414"></a></li>
    <li><a href="photo/2.jpg"><img src="photo/2.jpg" width="412" height="300" ></a></li>
    <li><a href="photo/3.jpg"><img src="photo/3.jpg" width="480" height="300" ></a></li>
    <li><a href="photo/4.jpg"><img src="photo/4.jpg" width="400" height="300" ></a></li> 
    <li><a href="photo/5.jpg"><img src="photo/5.jpg" width="450" height="347"></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 id="demo3" class="demo3">
<ul>
    <li><a href="photo/1.jpg"><img src="photo/1.jpg" width="420" height="414"></a></li>
    <li><a href="photo/2.jpg"><img src="photo/2.jpg" width="412" height="300" ></a></li>
    <li><a href="photo/3.jpg"><img src="photo/3.jpg" width="480" height="300" ></a></li>
    <li><a href="photo/4.jpg"><img src="photo/4.jpg" width="400" height="300" ></a></li> 
    <li><a href="photo/5.jpg"><img src="photo/5.jpg" width="450" height="347"></a></li>
    <li><a href="photo/5.jpg"><img src="photo/6.jpg" width="450" height="347"></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>