当前位置: 首页 > 工具软件 > elevateZoom > 使用案例 >

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

薛保臣
2023-12-01

用原生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>

 

转载于:https://www.cnblogs.com/joyho/articles/2958624.html

 类似资料: