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

最新推荐文章于 2025-08-08 17:07:36 发布

weixin_30699955

最新推荐文章于 2025-08-08 17:07:36 发布

阅读量83

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/NNUF/archive/2012/04/07/2436339.html

图片放大实例

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;
	}
}

转载于:https://www.cnblogs.com/NNUF/archive/2012/04/07/2436339.html