代码改变世界

javascript 简单的图片放大效果(一)

2012-04-07 18:21  VVG  阅读(2860)  评论(5)  编辑  收藏  举报

图片放大实例

 
HTML源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片放大实例</title>
<script type="text/javascript" src="javascript/vvg-base.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
#box{ width:604px; margin: 20px auto; overflow: hidden;}
#small,#big{ border:1px solid #000;  width:300px; height:300px;  float:left; overflow: hidden;}
#small{ position: relative;}
#big{border-left:none; position: relative; z-index:100px; display:none;}
#mask{ position:absolute; z-index:100px; width:100px; height:100px; background:#999; left:0; top:0; border:1px solid #000; cursor:crosshair; display:none;}
#bigImg{position: absolute;}
</style>
</head>
<body>
<div id="box">
    <div id="small">
           <a href="images/big.jpg">
               <img src="http://pic002.cnblogs.com/images/2012/352980/2012040420342427.jpg" id="smallImg" zoom="images/big.jpg"/>
           </a>
           <div id="mask"></div>
     </div>
      <div id="big"><img src="http://pic002.cnblogs.com/images/2012/352980/2012040420351855.jpg"  id="bigImg"  width="900" height="900"/></div>
</div>
<script type="text/javascript">
(function(){
    var small = VVG.DOM.$("small");
    var mask = VVG.DOM.$("mask");
    var bigImg = VVG.DOM.$("bigImg");
    var big = VVG.DOM.$("big");
    var smallImg = VVG.DOM.$("smallImg");
    VVG.DOM.setOpacity( mask,70 );
    var smallX = small.offsetLeft;
    var smallY = small.offsetTop;
    var smallW = small.offsetWidth;
    var smallH = small.offsetHeight;
    function maskMove(event){
        mask.style.display = "block";
        big.style.display = "block";
        var event = VVG.DOM.getEvent(event);
        var target = mask;
        var maskW = target.offsetWidth;
        var maskH = target.offsetHeight;
        var sTop = document.documentElement.scrollTop || document.body.scrollTop;
        var mouseX = event.clientX;
        var mouseY = event.clientY + sTop;
        // console.log(mouseX +"+" + mouseY);
        target.style.left = (mouseX - smallX - maskW/2 ) +"px";
        target.style.top = (mouseY - smallY - maskH/2 ) +"px";
if((mouseX - smallX)<maskW/2){
            target.style.left = "0px";
        }else if((mouseX - smallX) >(smallW-maskW +maskW/2)){
            target.style.left = (smallW-maskW ) + "px";
        }
        if((mouseY - smallY) <maskH/2){
            target.style.top ="0px";
        }else if((mouseY-smallY) > (smallH - maskH +maskH/2)){
            target.style.top = (smallH - maskH) +"px";
        }
        showBigImg(parseInt(target.style.left),parseInt(target.style.top));
    }
    function maskHidden(){
        //console.log("hidden");
        mask.style.display = "none";
        big.style.display = "none";

    }
    function showBigImg(left,top){
        left =left * 3;
        top = top * 3;
        
        bigImg.style.left = -left + "px";
        bigImg.style.top = -top + "px";

        console.log(left +"+" +top +"+"+bigImg.style.left);


    }
    VVG.DOM.bindEvent(small,"mousemove",maskMove);
    VVG.DOM.bindEvent(small,"mouseout",maskHidden);
})()

</script>
</body>
</html>


简单函数封装 ：vvg-base.js

var VVG = {};
VVG.DOM = {
	$: function(id) {
		return typeof id == "string" ? document.getElementById(id) : id;
	},
	$$: function(tag, parent) {
		return parent.getElementsByTagName(tag);
	},
	bindEvent: function(node, type, func) {
		if (node.addEventListener) {
			node.addEventListener(type, func, false);
		} else if (node.attachEvent) {
			node.attachEvent("on" + type, func);
		} else {
			node["on" + type] = func;
		}
	},
	unbindEvent: function(node, type, func) {
		if (node.removeElementListener) {
			node.removeElementListener(type, func, false);
		} else if (node.detachEvent) {
			node.detachEvent("on" + type, func);
		} else {
			node["on" + type] = null;
		}
	},
	getEvent: function(event) {
		return event ? event : window.event;
	},
	getTarget: function(event) {
		return event.target || event.srcElement;
	},
	preventDefault: function(event) {
		if (event.preventDefault) {
			event.preventDefault();
		} else {
			event.returnValue = false;
		}
	},
	stopBubble: function(event) {
		if (event.stopPropagation) {
			event.stopPropagation();
		} else {
			event.cancelBubble = true;
		}
	},
	setOpacity:function(node,value){
		if(document.all){
			node.style.filter = "alpha(opacity = "+ value +")";
		}else{
			node.style.opacity = value/100;
		}
	},
	setCss:function( node,cssJson){
		for(var i in cssJson){
			if(i =="opacity"){
				VVG.DOM.setOpacity(node,cssJson[i]);
			}else{
				node.style[i] = cssJson[i];
			}
		}
		return node;
	}
}