css 图片 局部 明晰(圆形 需要支持css3)
日期：2014-05-17 浏览次数：20657 次
css 图片 局部 清晰(圆形 需要支持css3)
<!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 clearimg = document.getElementById("clearimg");
var thumbWidth = thumb.clientWidth;
var thumbHeight = thumb.clientHeight;
//var abc = getStyle(thumb, "width");
thumb.style.left = (evt.clientX - thumbWidth / 2) + "px";
thumb.style.top = (evt.clientY - thumbHeight / 2) + "px";
thumb.style.positionX = thumb.style.left;
thumb.style.positionY = thumb.style.top;
//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 = 200;
var clipHeight = 200;
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;
}
#thumb {
position: absolute;
width: 200px;
height: 200px;
background-image: url('Hydrangeas.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
/* Do rounding (native in Safari, Firefox and Chrome) */
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
}
#main {
width: 600px;
height:400px;
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);"></div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
