css 图片 局部 明晰(矩形)
日期：2014-05-17 浏览次数：20623 次
css 图片 局部 清晰(矩形)
<!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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
