Cloud Zooml可以用于展示产品图片放大效果,下载地址:http://www.professorcloud.com/mainsite/cloud-zoom.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <mce:script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></mce:script> <mce:script src="cloud-zoom/cloud-zoom.1.0.2.min.js" mce_src="cloud-zoom/cloud-zoom.1.0.2.min.js" type="text/javascript"></mce:script> <link href="cloud-zoom/cloud-zoom.css" mce_href="cloud-zoom/cloud-zoom.css" type="text/css" /> <title>cloud-zoom</title> <mce:script type="text/javascript"><!-- $(document).ready(function(){ }); // --></mce:script> </head> <body> <a href="cloud-carousel/image/1.jpg" mce_href="cloud-carousel/image/1.jpg" class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4"><img class = "cloudcarousel" src="cloud-carousel/image/1.png" mce_src="cloud-carousel/image/1.png"/></a> <a href="cloud-carousel/image/2.jpg" mce_href="cloud-carousel/image/2.jpg" class='cloud-zoom-gallery' title='Thumbnail 1' rel="useZoom: 'zoom1', smallImage: 'cloud-carousel/image/2.png' "><img src="cloud-carousel/image/2.png" mce_src="cloud-carousel/image/2.png" /></a> <a href="cloud-carousel/image/3.jpg" mce_href="cloud-carousel/image/3.jpg" class='cloud-zoom-gallery' title='Thumbnail 2' rel="useZoom: 'zoom1', smallImage: 'cloud-carousel/image/3.png'"><img src="cloud-carousel/image/3.png" mce_src="cloud-carousel/image/3.png"/></a> <a href="cloud-carousel/image/4.jpg" mce_href="cloud-carousel/image/4.jpg" class='cloud-zoom-gallery' title='Thumbnail 3' rel="useZoom: 'zoom1', smallImage: 'cloud-carousel/image/4.png' "><img src="cloud-carousel/image/4.png" mce_src="cloud-carousel/image/4.png"/></a> </body> </html> 效果如下: