首页 > 其他 > 详细

简单的放大镜效果

时间:2014-04-11 09:03:32      阅读:501      评论:0      收藏:0      [点我收藏+]
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
 
<style type="text/css">
*{padding:0; margin:0;}
#main{margin:0px;}
.smallPic{ width:202px; height:202px; border:1px #b7b7b7 solid; text-align:center; float:left; margin-right:5px; position:relative;}
.smallPic .mouse{ width:50px; height:50px; position:absolute; left:1px; top:1px; border:1px solid #ccc; display:none;-moz-opacity: 0.8; background:#fff; opacity:.80; filter: alpha(opacity=80);}
.bigPic{ width:302px; height:302px; border:1px solid #b7b7b7; text-align:center; float:left; display:none; overflow:hidden; position:relative;}
.bigPic img{ position:absolute; left:0; top:0;}
img{ margin-top:1px;}
</style>
 
<script type="text/javascript">
window.onload = function (){
    var magnifier = function (){
        this.main = document.getElementById("main");
        this.smallPic = this.main.getElementsByTagName("div")[0];
        this.mouseBlock = this.smallPic.getElementsByTagName("p")[0];
        this.bigPic = this.main.getElementsByTagName("div")[1];
        this.displayBigPic();
    }
     
    magnifier.prototype = {
        displayBigPic : function (){
            var _this = this;
            this.smallPic.onmouseover = function (ev){
                var oEvent = ev || event;
                _this.bigPic.style.display = "block";
                _this.mouseBlock.style.display = "block";
                _this.mouseBlock.style.left = oEvent.clientX - _this.mouseBlock.offsetWidth / 2 - _this.main.offsetLeft + "px";
                _this.mouseBlock.style.top = oEvent.clientY - _this.mouseBlock.offsetHeight / 2 - _this.main.offsetTop + "px";             
            }
 
            this.smallPic.onmouseout = function (){
                _this.bigPic.style.display = "none";               
                _this.mouseBlock.style.display = "none";
            }
        },
         
    }
    var a = new magnifier();
}
</script>
 
 
</head>
 
<body>
 
<div id="main">
 
    <div class="smallPic">
        <p class="mouse"></p>
        <img src="images/small.png" />
    </div>
     
    <div class="bigPic">
        <img src="images/big.png" />
    </div>
 
</div><br>
</body>
</html>

 


 

  • 待续...

 

简单的放大镜效果,布布扣,bubuko.com

简单的放大镜效果

原文:http://www.cnblogs.com/xy404/p/3657687.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!