css 图片局部清晰(矩形)

fx05062219

浏览: 19803 次
性别:
来自: 杭州

最近访客更多访客>>

智拔天下

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html css clip javascript image

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
	function mouseOverHandler(evt) {
		var thumb = document.getElementById("thumb");
		var thumbWidth = thumb.clientWidth;
		var thumbHeight = thumb.clientHeight;
		//var abc = getStyle(thumb, "width");
		//thumb.style.left = evt.clientX + "px";
		//thumb.style.top = evt.clientY + "px";
		thumb.style.clip = buildClip(evt.clientX ? evt.clientX : evt.x,
				evt.clientY ? evt.clientY : evt.y, thumbWidth, thumbHeight);
	}
	function getStyle(elem, name) {
		//如果该属性存在于style[]中，则它最近被设置过(且就是当前的) 
		if (elem.style[name]) {
			return elem.style[name];
		}
		//否则，尝试IE的方式 
		else if (elem.currentStyle) {
			return elem.currentStyle[name];
		}
		//或者W3C的方法，如果存在的话 
		else if (document.defaultView && document.defaultView.getComputedStyle) {
			//它使用传统的"text-Align"风格的规则书写方式，而不是"textAlign" 
			name = name.replace(/([A-Z])/g, "-$1");
			name = name.toLowerCase();
			//获取style对象并取得属性的值(如果存在的话) 
			var s = document.defaultView.getComputedStyle(elem, "");
			return s && s.getPropertyValue(name);
			//否则，就是在使用其它的浏览器 
		} else {
			return null;
		}
	}
	var clipWidth = 400;
	var clipHeight = 400;
	function buildClip(x, y, width, height) {
		var rect = "rect(" + (y - clipHeight / 2 + "px,")
				+ ((x + clipWidth - clipWidth / 2) + "px,")
				+ ((y + clipHeight - clipHeight / 2) + "px,")
				+ (x - clipWidth / 2 + "px") + ")";
		return rect;
	}
</script>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}

img {
	
}

#thumb {
	position: absolute;
	background: url('Hydrangeas.jpg') no-repeat;
	clip: rect(0px, 400px, 400px, 0px);
}

#main {
	width: 1200px;
	height: 800px;
	position: absolute;
	background: url('Hydrangeas.jpg') no-repeat;
	/* Firefox, Safari(WebKit), Opera */
	filter: alpha(opacity =         20);
	background: url('Hydrangeas.jpg') no-repeat;
	opacity: 0.2;
	/* Firefox, Safari(WebKit), Opera */
	filter: alpha(opacity =         20);
	background: url('Hydrangeas.jpg') no-repeat;
	opacity: 0.2; /* Firefox, Safari(WebKit), Opera */
	filter: alpha(opacity =                                                    
		                                                         
		                                                      50);
	/* IE 4-7 */
}
</style>

</head>
<body>
<div id="main" onmousemove="mouseOverHandler(event);"></div>
<div id="thumb" onmousemove="mouseOverHandler(event);"><img
	src="Hydrangeas.jpg" /></div>

</body>
</html>