Tooptip.js:
复制代码代码如下:
función getViewPorthEight () {
if (window.innerheight! = window.unnefined) return window.innerheight;
if (document.compatMode == 'CSS1COMPAT') return document.documentelement.clientHeight;
if (document.body) return document.body.clientHeight;
Ventana de retorno.
}
función getViewPortWidth () {
if (window.innerwidth! = window.undefined) return window.innerwidth;
if (document.compatmode == 'css1compat') return document.documentelement.clientWidth;
if (document.body) return document.body.clientwidth;
Ventana de retorno.
}
/**
* Obtiene la parte superior de desplazamiento real
*/
función getScrollTop () {
if (self.pageyoffset) // Todos excepto explorador
{
return self.pageyOffset;
}
else if (document.documentelement && document.documentelement.scrolltop)
// Explorer 6 Striction
{
return document.documentelement.scrolltop;
}
else if (document.body) // todos los demás exploradores
{
return document.body.scrolltop;
}
}
función getscrollleft () {
if (self.pagexoffset) // Todos excepto explorador
{
return self.pagexoffset;
}
else if (document.documentelement && document.documentelement.scrollleft)
// Explorer 6 Striction
{
return document.documentelement.scrollleft;
}
else if (document.body) // todos los demás exploradores
{
return document.body.scrollleft;
}
}
/*
[HTML]
渐变的弹出图片
使用方法 ：
将 Tooltip.js 包含在网页 cuerpo 的结束标签后
调用方法 ：
[código]
<a href = "pages.jpg" Target = '_ Blank' onMouseOver = "ToolTip ('<img src = http: // zhouzh: 90/templet/t_yestem_channel/pages_small.jpg>')" onMouseOut = "ToolTip ()"> "iMg src = 'PAGEGS.JPG' ancho = 30 altura = 20 align = "Absmiddle"> </a>
必须 CSS 样式
复制代码代码如下:
.trans_msg
{
Filtro: alfa (opacidad = 100, habilitado = 1) revelatrans (duración = .2, transición = 1) blendtrans (duración = .2);
}
*/
//-初始化变量-
var rt = true; // 允许图像过渡
var bt = true; // 允许图像淡入淡出
var tw = 150; // 提示框宽度
var endaction = false; // 结束动画
var ns4 = document.layers;
var ns6 = document.getElementByid &&! Docum.all;
var ie4 = document.all;
offsetX = 10;
offsety = 20;
var toolTipStyle = "";
función inittooltips ()
{
tempDiv = document.createElement ("div");
tempDiv.id = "ToolTiplayer";
tempdiv.style.position = "Absolute";
tempdiv.style.display = "ninguno";
document.body.appendChild (tempDiv);
if (ns4 || ns6 || ie4)
{
if (ns4) toolTipStyle = document.ToolTIplayer;
else if (ns6) toolTipStyle = document.getElementById ("ToolTiplayer"). Style;
else if (ie4) toolTipStyle = document.all.tooltiplayer.style;
if (ns4) document.captureEvents (event.mouseMove);
demás
{
ToolTipStyle.visibility = "Visible";
ToolTipStyle.display = "Ninguno";
}
document.onmouseMove = MovetOMousEloc;
}
}
función de herramientas (msg, fg, bg)
{
intentar {
if (tooltip.arguments.length <1) // esconder
{
if (ns4)
{
ToolTipStyle.visibility = "Hidden";
}
demás
{
//-图象过渡 淡出处理-
if (!
if (rt) document.all ("msg1"). filtros [1] .Apply ();
if (bt) document.all ("msg1"). filtros [2] .Apply ();
document.all ("msg1"). filtros [0] .opacity = 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 = "Ninguno";}
}
if (bt) {
if (document.all ("msg1"). filtros [2] .status == 1 || document.all ("msg1"). filtros [2] .status == 0) {
ToolTipStyle.display = "Ninguno";}
}
if (! rt &&! bt) tooltipStyle.display = "Ninguno";
// ----------------------
}
}
más // show
{
if (! fg) fg = "#7777777";
if (! bg) bg = "#eeeeee";
contenido var =
'<table id = "msg1" name = "msg1" cellspacing = "0" cellPadding = "1" bgcolor = "' + fg + '"> <td>' + +
'<Tabla 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 (contenido);
ToolTipStyle.document.close ();
ToolTipStyle.visibility = "Visible";
}
if (ns6)
{
document.getElementById ("ToolTiplayer"). InnerHtml = content;
ToolTipStyle.display = 'bloque'
}
if (es decir)
{
document.all ("ToolTiplayer"). InnerHtml = content;
ToolTipStyle.display = 'bloque'
//-图象过渡 淡入处理-
var csSopaction = document.all ("msg1"). filtros [0] .opacity
document.all ("msg1"). filtros [0] .opacity = 0;
if (rt) document.all ("msg1"). filtros [1] .Apply ();
if (bt) document.all ("msg1"). filtros [2] .Apply ();
document.all ("msg1"). filtros [0] .opacity = csSopaction;
if (rt) document.all ("msg1"). filtros [1] .play ();
if (bt) document.all ("msg1"). filtros [2] .play ();
// ----------------------
}
}
} catch (e) {}
}
Función MovetOmOusEloc (E)
{
var scrollTop = getScrollTop ();
var scrollleft = getscrollleft ();
if (ns4 || ns6)
{
x = E.Pagex + scrollleft;
y = E.Pagey - Scrolltop;
}
demás
{
x = event.clientx + scrollleft;
y = Event.clienty;
}
if (x-scrollleft> getViewPortWidth () / 2) {
x = x - document.getElementById ("ToolTiplayer"). OffSetWidth - 2 * OffSetX;
}
if ((y+document.getElementById ("ToolTiplayer"). OffSetHeight+Offsety)> GetViewPorthEight ()) {
y = getViewPorthEight ()-document.getElementById ("ToolTiplayer"). OffSetHEight-offsety;
}
ToolTipStyle.left = (x + offsetX) + 'px';
ToolTipStyle.top = (y + offsety + scrolltop) + 'px';
devolver verdadero;
}
initooltips ();
主页面:
引入 index.css
复制代码代码如下:
<link href = "css/index.css" rel = "stylesheet" type = "text/css"/>
<body style = "text-align: centro">
<div>
<ul>
<li>
<div> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = 'images/2009511956153474660_small.jpg' onMouseOver = "Tooltip ('<img src = images/200951156153444660.j.jpg>') ') onMouseOut = "ToolTip ()"> </a> </div>
</li>
<li>
<div> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = 'Images/2009551813457815940_small.jpg' onMouseOver = "Tooltip ('<img src = image/20095551813457815940.jpg>') onMouseOut = "ToolTip ()"> </a> </div>
</li>
</ul>
</div>
引入 tooptip.js
复制代码代码如下:
<script language = "javaScript" src = "js/tooltip.js"> </script>
</body>
</html>
index.css:
复制代码代码如下:
/*首页*/
html {desbordamiento: -moz-scrollbars- vertical; } /*Siempre muestre Firefox Scrollbar* /
cuerpo {fuente: 12px/22px "宋体"; Descanso de palabras: quiebre; text-align: izquierda; Antecedentes:#C0C0C0; Color:#4e4e4e;}
UL, Li {estilo list: ninguno;}
A {Color:#333; Decoración de texto: Ninguno;}
a: hover {color:#ff722d; Decoración de texto: Ninguno;}
img {border: 0;}
a img, a: hover img {border: 0;}
.latestweb {ancho: 980px; Margen: 10px Auto 0;}
.latestweb ul {desbordamiento: oculto; _Height: 1%;}
.latestweb li {float: izquierda; borde: 1px sólido #ebeaea; Ancho: 150px; relleno: 10px; margen: 14px 14px 0 0; }
.trans_msg {filtro: alfa (opacidad = 100, habilitado = 1) revelatrans (duración = .2, transición = 1) blendtrans (duración = .2);}
div.BodyContent {Font-Family: Arial, Helvetica, Sans-Serif; Padding: 0 10px 10px 13px; Color:#555; Line-Height: 22px; Text-Align: Justify; Text-Justify: Inter -doograph;}
div.bodycontent ul {margin-izquierda: 0px}