演示地址:http://www.corange.cn/demo/3645/index.html
看到一个网站一个很漂亮的效果，在源码里面里面找了一圈，发现是highslide，然后经过研究后可以使用了，这边放一个例子。
点击图片放大效果，再次点击缩小。
<script type="text/javascript" src="highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'controls-in-heading';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;

// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: false,
overlayOptions: {
opacity: 1,
position: 'top right',
hideOnMouseOut: false
}
});
</script>
<a href="images/image-1.jpg" class="highslide"
onclick="return hs.expand(this)"><img src="images/thumb-1.jpg"
alt="Highslide JS" /> </a>
<div class="highslide-caption highslide-display-block" id="" align="right" style="overflow-x: hidden; overflow-y: hidden; z-index: 2; margin-top: 0px; visibility: visible; height: 17px">
<img src="001_files/clickToC.png" onclick="return hs.close(this)" title="close" style="cursor:pointer;" alt="Close"/>
</div>
<a href="images/1.jpg" class="highslide"
onclick="return hs.expand(this)"><img src="images/1.jpg"
alt="Highslide JS" /> </a>
<div class="highslide-caption highslide-display-block" id="" align="right" style="overflow-x: hidden; overflow-y: hidden; z-index: 2; margin-top: 0px; visibility: visible; height: 17px">
<img src="001_files/clickToC.png" onclick="return hs.close(this)" title="close" style="cursor:pointer;" alt="Close"/>
</div>
其他文件
http://www.corange.cn//uploadfiles/highslide_24694.rar
images下的文件就是图片和一个关闭，这边就不传了，放一个截图

原文地址:http://www.corange.cn/archives/2010/05/3645.html