http://www.17css.com/cloud-zoom/
图片放大镜效果是一种不错的效果,多应用于电子商务、图片展示等网站,给用户带来更好的体验。实现这种效果的代码不少,今天要给大家介绍的是
Cloud Zoom,它是 jQuery 的一个插件。和其他产品相比,Cloud Zoom 具有代码少、功能多、兼容性好等特点,并且支持
Tint、 Soft Focus 和 Inner 三种放大镜模式。
目前,Cloud Zoom 的最新版本是 1.0.2,我们就此版本为例(1.0.2与之前版本有所不同),来看看 Cloud Zoom 是如何工作的。首先,当然是引入插件以及附带的 CSS 文件,当然,你喜欢的话,样式可以自己编写。然后编写 XHTML 代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/cloud-zoom.css"/>
<script src="../js/jquery-1.4.4.min.js"></script>
<!--如果想自定义放大后的效果的话用js添加ref属性。必须放在cloud-zoom.1.0.2.min.js之前-->
<script>
$(function(){
$('.cloud-zoom').attr('rel','tint:"#f00",adjustX:150,position:"buttom"');
})
</script>
<script src="../js/cloud-zoom.1.0.2.min.js"></script>
</head>
<body>
<!--href 是指向大照片 src是默认看到的照片 class别忘加-->
<a href="../pic/bigimage00.jpg" class="cloud-zoom">
<img src="../pic/smallimage.jpg" alt="xxx" />
</a>
</body>
</html>