jQuery插件：magnifier

发表于 | 分类于

magnifier

一个简单的图片放大镜效果
这是一个简单放大镜效果，写着玩的！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE HTML>
<html>
<head>
<title>Magnifier</title>
<meta charset="utf-8">
<style>
*{ margin:0; padding:0;}
ul{ list-style:none;}
.t{ padding-bottom:12px;}
.st{ padding:6px 0 4px;}
.c{ margin:0 0 30px 0;}
pre{ padding:12px 8px; margin-bottom:30px; background-color:#EEECCC;}
body{font-family:Arial, Helvetica, sans-serif; font-size:12px;}

#zoom{ width:375px; height:500px; position:relative; margin:10px 0; border:1px solid #000;}
.magnifier{ width:120px; height:120px; position:absolute; border:1px solid #CCC; display:none; background:url(temp.jpg) no-repeat; border-radius:100%;}
</style>
</head>

<body>
<h4 class="t">放大镜插件</h4>
<p class="st">演示效果：</p>
<div class="c">
<!------------------------------->

<div id="zoom">
	<img src="temp.jpg" width="375" height="500" border="0"> 
</div>

<!------------------------------->
<div id="ddd">
</div>

</div>
<p class="st">使用方法：</p>
<pre>
<code>$("seletor").magnifier()</code>
</pre>

<script src="jquery.js"></script>
<script src="magnifier.js"></script>
<script>
$(function(){
	$("#zoom").magnifier();
});
</script>
</body>
</html>

源码地址