Tooptip.js:
复制代码代码如下:
função getViewPorthEight () {
if (window.innerHeight! = window.undefined) retorna janela.innerHeight;
if (document.compatmode == 'css1compat') return document.documentElement.clientHeight;
if (document.body) retornar document.body.clientHeight;
retornar janela.undefined;
}
function getViewportWidth () {
if (window.innerwidth! = window.undefined) retorna janela.innerwidth;
if (document.compatmode == 'css1compat') return document.documentElement.clientWidth;
if (document.body) retornar document.body.clientwidth;
retornar janela.undefined;
}
/**
* Obtém o top de rolagem real
*/
função getsCrolltop () {
if (self.pageyoffset) // todos, exceto o explorador
{
return self.pageyoffset;
}
caso contrário, if (document.documentElement && document.documentElement.scrolltop)
// explorador 6 rigoroso
{
retornar document.documentElement.scrolltop;
}
caso contrário, se (document.body) // todos os outros exploradores
{
retornar document.body.scrolltop;
}
}
função getScrollLeft () {
if (self.pagexoffset) // todos, exceto o explorador
{
return self.pagexoffset;
}
caso contrário, if (document.documentElement && document.documentElement.scrollleft)
// explorador 6 rigoroso
{
retornar document.documentElement.scrollleft;
}
caso contrário, se (document.body) // todos os outros exploradores
{
retornar document.body.scrollleft;
}
}
/*
[html]
渐变的弹出图片
使用方法
将 Tooltip.js 包含在网页 corpo 的结束标签后
调用方法
[código]
<a href = "páginas.jpg" Target = '_ Blank' onMouseOver = "Tooltip ('<img src = http: // zhouzh: 90/templet/t_yestem_channel/pages_small.jpg> s) largura = 30 altura = 20 align = "absmiddle"> </a>
必须 CSS 样式
复制代码代码如下:
.TRANS_MSG
{
filtro: alfa (opacidade = 100, ativado = 1) reveretrans (duração = 0,2, transição = 1) blendtrans (duração = 0,2);
}
*/
//-初始化变量-
var rt = true; // 允许图像过渡
var Bt = true; // 允许图像淡入淡出
var tw = 150; // 提示框宽度
var endaction = false; // 结束动画
var ns4 = document.layers;
var ns6 = document.getElementById &&! document.all;
var ie4 = document.all;
offsetx = 10;
deslocamento = 20;
var tooltipstyle = "";
função intoToolTips ()
{
tempdiv = document.createElement ("div");
tempdiv.id = "ToolTiplayer";
tempdiv.style.position = "absoluto";
tempdiv.style.display = "nenhum";
document.body.appendChild (tempdiv);
if (ns4 || ns6 || ie4)
{
if (NS4) ToolTipStyle = document.tooltiplayer;
caso contrário, if (NS6) ToolTipStyle = document.getElementById ("ToolTiplayer"). Style;
caso contrário, if (ie4) ferramentatipstyle = document.all.tooltiplayer.style;
if (ns4) document.captureEvents (event.mousemove);
outro
{
ToolTipStyle.visibility = "Visible";
ToolTipStyle.display = "nenhum";
}
document.onMousEMove = MoveTomouseLoc;
}
}
Função Tooltip (MSG, FG, BG)
{
tentar {
if (Tooltip.argudents.length <1) // ocultar
{
if (ns4)
{
ToolTipStyle.visibility = "Hidden";
}
outro
{
//-图象过渡 ， 淡出处理-
if (! Endaction) {ToolTipStyle.Display = "None";}
if (rt) document.all ("msg1"). filtros [1] .Apply ();
if (bt) document.all ("msg1"). filtros [2] .Apply ();
document.all ("msg1"). filtros [0] .Opacidade = 0;
if (rt) document.all ("msg1"). filtros [1] .Play ();
if (bt) document.all ("msg1"). filtros [2] .Play ();
if (rt) {
if (document.all ("msg1"). filtros [1] .status == 1 || document.all ("msg1"). Filtros [1] .status == 0) {
ToolTipstyle.display = "None";}
}
if (bt) {
if (document.all ("msg1"). filtros [2] .status == 1 || document.all ("msg1"). filtros [2] .status == 0) {
ToolTipstyle.display = "None";}
}
if (! rt &&! bt) ToolTipStyle.Display = "None";
// ------------------------
}
}
else // show
{
if (! FG) FG = "#777777";
if (! bg) bg = "#eeeeee";
VAR conteúdo =
'<tabela id = "msg1" name = "msg1" CellSpacing = "0" CellPadding = "1" BGCOLOR = "' + FG + '"> <TD>' +
'<Table Cellspacing = "2" CellPadding = "3" BGCOLOR = "' + BG +
'"> <td> <font face =" arial "color ="' + fg +
'"size ="-2 ">' + msg +
'</font> </td> </table> </td> </ table>';
if (ns4)
{
ToolTipstyle.document.write (content);
ToolTipstyle.document.close ();
ToolTipStyle.visibility = "Visible";
}
if (ns6)
{
document.getElementById ("ToolTiplayer"). INnerHTML = Content;
ToolTipstyle.display = 'Bloco'
}
se (ie4)
{
Document.all ("ToolTiplayer"). Innerhtml = Content;
ToolTipstyle.display = 'Bloco'
//-图象过渡 ， 淡入处理-
var csopaction = document.all ("msg1"). Filtros [0] .Opacity
document.all ("msg1"). filtros [0] .Opacidade = 0;
if (rt) document.all ("msg1"). filtros [1] .Apply ();
if (bt) document.all ("msg1"). filtros [2] .Apply ();
document.all ("msg1"). filtros [0] .Opacidade = csssopaction;
if (rt) document.all ("msg1"). filtros [1] .Play ();
if (bt) document.all ("msg1"). filtros [2] .Play ();
// ------------------------
}
}
} catch (e) {}
}
função movetomouseloc (e)
{
var scrolltop = getsCrolltop ();
var scrollLeft = getScrollLeft ();
if (ns4 || ns6)
{
x = e.pagex + rollleft;
y = e.pagey - scrolltop;
}
outro
{
x = event.clientx + rollleft;
y = event.clienty;
}
if (x-scrollleft> getViewPorwidth () / 2) {
x = x - document.getElementById ("ToolTiplayer"). OffsetWidth - 2 * offsetX;
}
if ((y+document.getElementById ("ToolTiplayer").
y = getViewPorthEight ()-document.getElementById ("ToolTiplayer").
}
ToolTipStyle.left = (x + offsetx) + 'px';
ToolTipStyle.top = (y + offsety + scrolltop) + 'px';
retornar true;
}
inittooltips ();
主页面:
引入 Index.css
复制代码代码如下:
<link href = "css/index.css" rel = "stylesheet" type = "text/css"/>
<body style = "text-align: Center">
<div>
<ul>
<li>
<div><a href="http://www.lanrentuku.com/" target="_blank"><img src='images/2009511956153474660_small.jpg' onMouseOver="toolTip('<img src=images/2009511956153474660.jpg>')" onmouseout = "Tooltip ()"> </a> </div>
</li>
<li>
<div> <a href = "http://www.lanrentuku.com/" Target = "_ Blank"> <img src = 'imagens/2009551813457815940_small.jpg' onMouseover = "Tooltip ('<img src = imagens/2009551813457815940.jpg> ') "onMouseout =" Tooltip () "> </a> </div>
</li>
</ul>
</div>
引入 TOOPTIP.JS
复制代码代码如下:
<Script Language = "javascript" src = "js/tooltip.js"> </sCript>
</body>
</html>
index.css:
复制代码代码如下:
/*首页*/
html {overflow: -moz-scrollbars-vertical; } /*Sempre mostre o Firefox ScrollBar* /
corpo {font: 12px/22px "宋体"; Break Word: Break-All; Alinhamento de texto: esquerda; Antecedentes:#C0C0C0; Cor:#4E4E4E;}
ul, li {estilo de lista: nenhum;}
a {cor:#333; Decoração de texto: Nenhum;}
A: Hover {color:#ff722d; Decoração de texto: Nenhum;}
img {borda: 0;}
A IMG, A: Passe o mouse img {Border: 0;}
.latestweb {width: 980px; Margem: 10px Auto 0;}
.LATESTWeb UL {Overflow: Hidden; _Eight: 1%;}
.latestweb li {float: esquerda; fronteira: 1px sólido #ebeaea; Largura: 150px; preenchimento: 10px; margem: 14px 14px 0 0; }
.Trans_msg {filtro: alpha (opacidade = 100, habilitado = 1) reveretrans (duração = 0,2, transição = 1) blendtrans (duração = 0,2);}
Div.BodyContent {Font-Family: Arial, Helvetica, Sans-Serif; Padding: 0 10px 10px 13px; cor:#555; altura da linha: 22px; Alinhamento de texto: Justify; Text-Justify: inter-ideografia;}
Div.BodyContent Ul {Margin-Left: 0px}