移动高亮

我 最近注意到 Google Chrome UI 中的一个微妙而漂亮的效果。 当您将鼠标悬停在非活动标签上时，它们会稍微亮起来，并且还会有一个跟随您鼠标在它们上面移动的渐变高亮。

来自 DOCTYPE 的家伙告诉我这是他们网站导航的灵感来源。 他们 正在做 我会做的事情，使用 CSS3 渐变和 jQuery。 因此，我决定获取他们的代码并试着玩一下。

径向渐变

高亮本身将由径向渐变创建。 一种可能的方法是创建一个 alpha 透明的 PNG 图片并使用它。 但我们喜欢在这里保持时尚和进步。 径向渐变可以通过 CSS3 创建，这为我们节省了一个资源请求并允许更轻松地更改颜色。

基于 Webkit 和 Mozilla 的浏览器（仅）可以执行径向渐变。 语法

background: -webkit-gradient(
  /* radial, <point>, <radius>, <point>, <radius>, <stop>,  [<stop>, ] <stop> */
  radial, 500 25%, 20, 500 25%, 40, from(white), to(#ccc)
);

background: -moz-radial-gradient(
  /* [<position>,] [<shape> || <size>,] <stop> [, <stop>], <stop> */
  500px 25%, circle, white 20px, #ccc 40px
);

JavaScript 鼠标位置

现在我们知道如何应用 CSS3 渐变，但这样做是为了在鼠标所在的位置应用渐变高亮。 CSS 无法提供鼠标位置坐标，我们需要 JavaScript 来实现。 因此，计划如下

1. 当鼠标移到该区域时
2. 检测鼠标位置
3. 将渐变应用于该位置的区域
4. 当鼠标离开时移除渐变

我们将使用 jQuery。

var x, y;

$('#highlight-area').mousemove(function(e) {

  x  = e.pageX - this.offsetLeft;
  y  = e.pageY - this.offsetTop;

  // apply gradient using these coordinates
	
}).mouseleave(function() {			

  // remove gradient

});

供应商前缀在值中的麻烦

供应商前缀作为属性是可以的。 您想跨浏览器旋转某个东西（使用动态 JavaScript 值），您需要使用 -webkit-transform、-o-transform 和 -moz-transform。 如果您需要使用 jQuery 来完成它，您可以这样做

var angle = 30;

$(".rotate-me").css({
  "-webkit-transform" : "rotate(" + angle + "deg)",
  "-moz-transform" : "rotate(" + angle + "deg)"
  "-o-transform" : "rotate(" + angle + "deg)"
});

这有效是因为每个属性都不同。 对于渐变，属性始终相同，即 background-image 属性。 因此，就像这样不起作用

$(".wont-make-purple").css({
  "color" : "red",
  "color" : "blue" // overrides previous
});

这也将不起作用

$("#highlight-area").css({
  "background-image" : "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", " + gradientSize + ", from(" + lightColor + "), to(rgba(255,255,255,0.0))), " + originalBG;
  "background-image" : "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBGplaypen + " " + gradientSize + "px)"
});

但不知何故，无法解释（并且值得庆幸的是）这样做有效

var bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", " + gradientSize + ", from(" + lightColor + "), to(rgba(255,255,255,0.0))), " + originalBGplaypen;
var bgMoz    = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBGplaypen + " " + gradientSize + "px)";
					
$(this)
	.css({ background: bgWebKit })
	.css({ background: bgMoz });

一定有一些神奇的智能功能集成在其中，它不会覆盖之前设置的值。

高亮标签

因此，让我们给自己一些实际的标签来进行高亮。 标记中没有什么特别之处

<ul class="nav clearfix">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li class="active"><a href="#">Clients</a></li>
   <li><a href="#">Contact Us</a></li>
</ul>

以及使其看起来像标签的 CSS

.nav { 
	list-style: none; 
	border-bottom: 1px solid #a0a0a0; 
	padding: 10px 10px 0 10px;	
}
.nav li { display: inline; }
.nav li.active a {
	position: relative;
	z-index: 1; 
	bottom: -2px;
	margin-top: -2px;
	background: #eee;
	padding-top: 8px;
	padding-bottom: 8px;
}
.nav li a { 
	float: right; 
	text-decoration: none;
	position: relative;
	padding: 7px 50px; 
	margin: 0 0 0 -8px; 
	color: #222;
	background: #d8d7d8; 
	-webkit-border-top-right-radius: 20px 40px;
	-webkit-border-top-left-radius: 20px 40px;
	-moz-border-radius-topleft: 20px 40px;
	-moz-border-radius-topright: 20px 40px;
	-webkit-box-shadow: inset 1px 1px 0 white;
	-moz-box-shadow: inset 1px 1px 0 white;
	border: 1px solid #a0a0a0;
}

所以现在每个标签都是我们计划应用高亮的区域。 对于每个非活动标签，我们将把我们已经涵盖的所有内容整合在一起

var originalBG = $(".nav a").css("background-color");

$('.nav li:not(".active") a')
.mousemove(function(e) {

    x  = e.pageX - this.offsetLeft;
    y  = e.pageY - this.offsetTop;
    xy = x + " " + y;
	   
    bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", 100, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.0))), " + originalBG;
    bgMoz    = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBG + " " + gradientSize + "px)";

    $(this)
      .css({ background: bgWebKit })
      .css({ background: bgMoz });
		
}).mouseleave(function() {
	$(this).css({ background: originalBG });
});

查看演示   下载文件