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

2012-04-07 18:21 VVG 阅读(2861) 评论(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;
    }
}