使用elevateZoom插件实现的放大镜效果

用原生javascript写了一个放大镜效果后，用插件简单地再做一下下。必须得承认，用插件来实现绝对是偷懒的好方法。如果要考虑性能来说的话，用原生的比用插件的更优化，毕竟实现的目的很简单，用插件实现的话导致加载了很多多余的数据，大大滴影响了性能。可是这真的是大大滴减少了开发的时间呢。

下面给个效果看看（当然这只是最简单的一个效果，其他复杂点的好看点的效果~~~~等待你去用咯）：

 

下面贴出代码

<!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" />
<title>用插件实现的放大镜效果</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> 
<script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js" type="text/javascript"></script>
</head>

<body>
<img style="border:1px solid #e8e8e6;" id="pic" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" 
data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image1.jpg"
width="411"  />
<script>
$('#pic').elevateZoom();
</script>
</body>
</html>

 

posted @ 2013-03-14 00:15  Joy Ho  阅读(1967)  评论(0)  编辑  收藏  举报