使用JavaScript和CSS的透明弹出链接

分享于 

4分钟阅读

Web开发

  繁體

Sample Image - maximum width is 600 pixels

介绍

当我上网的时候,我发现一些网站使用一些酷的弹出链接来描述,或者你可以把它叫做工具提示或者是工具。 我发现它很有趣,因为它的透明性和想法也可以能是你喜欢的,所以我发布了这篇文章。 使用小JavaScript和CSS可以帮助你轻松做到这一点。

使用 CSS

在CSS中,只需将这里代码添加到页面 below的顶部 <头> 创建一个CSS类来定制弹出窗口的外观。

<style type="text/css">
. transparent {
 filter:alpha(opacity=90);background-color:green;display:none;width:170;height:100;position:absolute;color: white;border: 1 green solid;}</style>

代码 上面的核心是 3rd 行: filter:alpha(opacity=90);。这里行使弹出式弹出窗口透明度设置为 90. 你可以在 0 - 100范围内设置不透明度。 如果设置为 0,则不会看到弹出窗口。

使用 JavaScript

在 CSS 上面 之后添加脚本 below。

<script>
 /* this function shows the pop-up when
 user moves the mouse over the link */function Show()
 {
 /* get the mouse left position */ x = event.clientX + document.body.scrollLeft;
 /* get the mouse top position */ y = event.clientY + document.body.scrollTop + 35;
 /* display the pop-up */ Popup.style.display="block";
 /* set the pop-up's left */ Popup.style.left = x;
 /* set the pop-up's top */ Popup.style.top = y;
 }
 /* this function hides the pop-up when
 user moves the mouse out of the link */function Hide()
 {
 /* hide the pop-up */ Popup.style.display="none";
 }
</script>

代码 上面 非常简单,只有 2个函数,一个显示弹出,另一个隐藏弹出。

使用 HTML

最后一部分是一些 HTML,作为代码 below,指向页面的body,并将它的运行并运行。

<bodybgcolor="black"text="white"><ahref=""onMouseOut="Hide()"onMouseOver="Show()"onMouseMove="Show()">Move the mouse over here</a><br><br>Move your move over the link 上面<br>and the pop-up appears. And the pop-up<br>follows your mouse as long as your mouse<br>is still over the link. <divid="Popup"class="transparent"><divstyle="background-color: #003366"><b>Title goes here</b></div><div></b>Description goes here</div></div></body>

还有什么?

如果在CSS代码中更改一点,你将得到 2种类型的弹出:

  • 将行 filter:glow(opacity=90); 改为 filter:progid:DXImageTransform:Microsoft.Glow(color=yellow,strength=5); 你会得到这样的结果:

Sample Image - maximum width is 600 pixels

  • 或者将 filter:glow(opacity=90); 行改为 filter:progid:DXImageTransform:Microsoft.DropShadow(color=yellow,strength=5); 你会得到一个阴影的影子:

Sample Image - maximum width is 600 pixels

请注意,2类型 上面 仅适用于 ie5.5+。 希望这对你有帮助 !


JAVA  Javascript  DES  POP  link  Transparent