cssHooks是jquery用来实现跨浏览器css特效的手法。
下面是自定义cssHooks的案例：
!DOCTYPE html>
<html>
<head>
<title>CSS Hooks API</title>
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js"></script>
<script type="text/javascript">
//cssHooks的效果在於 -- 假設有人不辭辛勞種出大樹
(function ($) {
var _patterns = {
"msie": "progid:DXImageTransform.Microsoft.Gradient(" +
"StartColorStr='{0}', EndColorStr='{1}', GradientType=0)",
"msie10": "-ms-linear-gradient(top, {0} 0%, {1} 100%)",
"mozilla": "-moz-linear-gradient(top, {0} 0%, {1} 100%)",
"opera": "-o-linear-gradient(top, {0} 0%, {1} 100%)",
"webkit": "-webkit-gradient(linear, left top, left bottom, from({0}), to({1}))"
};
var _browserName = function () {
var ua = $.browser;
if (ua.msie)
if (ua.version.split('.')[0] > 9) return "msie10";
else return "msie";
else if (ua.mozilla) return "mozilla";
else if (ua.opera) return "opera";
else if (ua.webkit) return "webkit";
else return "unknown";
}
var _genCssString = function (s, b) {
var reStr = _patterns[b];
if (!reStr) return null;
var p = s.split(',');
if (p.length < 2) return;
return reStr.replace(/\{0\}/, p[0])
.replace(/\{1\}/, p[1]);
};
$.cssHooks["lineGradBackground"] = {
get: function (elem, computed, extra) {
return "not implemented!";
},
set: function (elem, value) {
var b = _browserName();
elem.style[b == "msie" ? "filter" : "background"] =
_genCssString(value, b);
}
};
})(jQuery);
</script>
<script type="text/javascript">
//後人就可以在樹下納涼，用一行css()搞定可跨瀏覽器的奇炫CSS特效
$(function () {
$("#x").css("lineGradBackground", "#3399FF,#66FFFF");
$("#y").css("lineGradBackground", "#FF9933,#666666");
});
</script>
</head>
<body>
<div style="width: 300px; height: 60px;" id="x"></div>
<div style="width: 300px; height: 60px;" id="y"></div>
</body>
</html>
如以上代码所示，
cssHooks其实是一种典型“前人种树，后人乘凉”的机制。
网友评论