简单的放大镜效果 

<!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>
 
<style type="text/css">
*{padding:0; margin:0;}
#main{margin:20px;}
.smallPic{ width:202px; height:202px; border:1px #b7b7b7 solid; text-align:center; float:left; margin-right:5px; position:relative;}
.smallPic img { position:absolute; left: 1px; top:1px;}
.smallPic .mouse{ width:50px; height:50px; position:absolute; z-index: 5; 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:; overflow:hidden; position:relative;}
.bigPic img{ position:absolute; left:0; top:0px;}
</style>
 
<script type="text/javascript">
window.onload = function (){
    var magnifier = function (){
        this.main = document.getElementById("main");
        this.smallDiv = this.main.getElementsByTagName("div")[0];
        this.mouseBlock = this.smallDiv.getElementsByTagName("p")[0];
        this.bigDiv = this.main.getElementsByTagName("div")[1];
		this.smallPic = this.smallDiv.getElementsByTagName("img")[0];
		this.bigPic = this.bigDiv.getElementsByTagName("img")[0];
        this.displayBigPic();
    }
     
    magnifier.prototype = {
        displayBigPic : function (){
            var _this = this;
            this.smallDiv.onmouseover = function (ev){
                var oEvent = ev || event;
                _this.bigDiv.style.display = "block";
                _this.mouseBlock.style.display = "block";

				var l = oEvent.clientX - _this.mouseBlock.offsetWidth / 2 - _this.main.offsetLeft;
				var t = oEvent.clientY - _this.mouseBlock.offsetHeight / 2 - _this.main.offsetTop;
				if(l < 0){
					l = 0;
				}else if(l > _this.smallDiv.offsetWidth - _this.mouseBlock.offsetWidth){
					l = _this.smallDiv.offsetWidth - _this.mouseBlock.offsetWidth;
				}
				if(t < 0){
					t = 0;
				}else if(t > _this.smallDiv.offsetHeight - _this.mouseBlock.offsetHeight - 1){
					t = _this.smallDiv.offsetHeight - _this.mouseBlock.offsetHeight -1;
				}

                _this.mouseBlock.style.left = l + "px";
                _this.mouseBlock.style.top = t + "px";
				_this.bigPic.style.left = - l + "px";
				_this.bigPic.style.top = - t + "px";
            }
 
            this.smallDiv.onmouseout = function (){
                _this.bigDiv.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>

</body>
</html>

　　

 

  • 本来想着要算一下比例的，可能这个比较特殊不用吧。囧。。。
posted @ 2014-04-10 23:23  半颠者  阅读(128)  评论(0)    收藏  举报