Tooptip.js:
复制代码代码如下:
fonction getViewPorthEight () {
if (window.innerHeight! = window.undefined) return window.innerHeight;
if (document.compatMode == 'css1compat') return document.documentElement.clientHeight;
if (document.body) return document.body.clientHeight;
Retour Window.undfined;
}
function getViewportWidth () {
if (window.innerwidth! = window.undefined) return window.innerwidth;
if (document.compatmode == 'css1compat') return document.documentElement.clientWidth;
if (document.body) return document.body.clientwidth;
Retour Window.undfined;
}
/ **
* Obtient le vrai haut de défilement
* /
fonction getCrollTop () {
if (self.pageyoffset) // tout sauf l'explorateur
{
return self.pageyoffset;
}
else if (document.DocumentElement && document.DocumentElement.ScrollTop)
// Explorer 6 strict
{
return document.DocumentElement.ScrollTop;
}
else if (document.body) // tous les autres explorateurs
{
return document.body.scrolltop;
}
}
fonction getcrollleft () {
if (self.pagexoffset) // tout sauf l'explorateur
{
return self.pagexoffset;
}
else if (document.DocumentElement && document.documentElement.scrollleft)
// Explorer 6 strict
{
retour document.DocumentElement.Scrollleft;
}
else if (document.body) // tous les autres explorateurs
{
return document.body.scrollleft;
}
}
/ *
[html]
渐变的弹出图片
：
将 info-bullep.js 包含在网页 corps 的结束标签后
：
[code]
<a href = "pages.jpg" target = '_ blanc' onMouseOver = "ToolTip ('<img src = http: // zhouzh: 90 / templet / t_yestem_channel / pages_small.jpg>')" onMouseout = "toolTip ()"> <img src = 'pages_rsmall.jpg =) "> <img src =' pages_rsmall.jpg =)"> <img src = 'pages_rsmall.jpg =) "> <img Src =' pages_rsmall.jpg =)"> <img Src = 'pages_rsmall.jpg =) "> <img Src =' pages_rsmall.jpg =)"> <img Src = 'pages_rsmall.jpg =) "> <img Src =' pages_small.jpg =) largeur = 30 hauteur = 20 align = "Absmiddle"> </a>
必须 CSS 样式
复制代码代码如下:
.trans_msg
{
Filtre: alpha (opacité = 100, activé = 1) révélation (durée = .2, transition = 1) mélangetrans (durée = .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;
offsey = 20;
var toolTipstyle = "";
fonction inittooltips ()
{
tempdiv = document.CreateElement ("div");
tempdiv.id = "ToolTiplayer";
tempdiv.style.position = "absolu";
tempdiv.style.display = "aucun";
document.body.ApendChild (tempdiv);
if (ns4 || ns6 || ie4)
{
if (ns4) ToolTipStyle = document.toolTiplayer;
else if (ns6) toolTipStyle = document.getElementyId ("ToolTipplayer"). Style;
else if (ie4) toolTipstyle = document.all.tooltiplayer.style;
if (ns4) Document.CaptureEvents (event.MousMove);
autre
{
ToolTipstyle.Visibility = "Visible";
ToolTipStyle.display = "Aucun";
}
document.onMouseMove = MoveTomouseLoc;
}
}
Infiltration de fonction (MSG, FG, BG)
{
essayer {
if (tooltip.arguments.length <1) // masquer
{
if (ns4)
{
ToolTipStyle.Visibility = "Hidden";
}
autre
{
// - 图象过渡 ， 淡出处理 -
if (! endAction) {ToolTipstyle.display = "None";}
if (rt) document.all ("msg1"). filtres [1] .Apply ();
if (bt) document.all ("msg1"). filtres [2] .Apply ();
document.all ("msg1"). filtres [0] .opacity = 0;
if (rt) document.all ("msg1"). filtres [1] .play ();
if (bt) document.all ("msg1"). filtres [2] .play ();
if (rt) {
if (document.all ("msg1"). filtres [1] .status == 1 || document.all ("msg1"). filtres [1] .status == 0) {
ToolTipstyle.display = "Aucun";}
}
if (bt) {
if (document.all ("msg1"). filtres [2] .status == 1 || document.all ("msg1"). filtres [2] .status == 0) {
ToolTipstyle.display = "Aucun";}
}
if (! rt &&! bt) ToolTipStyle.display = "Aucun";
// ----------------------
}
}
else // montre
{
if (! fg) fg = "# 777777";
if (! bg) bg = "#eeeee";
var contenu =
'<table 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> </s table>';
if (ns4)
{
ToolTipstyle.Document.Write (Contenu);
ToolTipstyle.Document.close ();
ToolTipstyle.Visibility = "Visible";
}
if (ns6)
{
document.getElementById ("ToolTiplayer"). InnerHTML = Content;
ToolTipstyle.display = 'Block'
}
si (ie4)
{
Document.all ("ToolTiplayer"). InnerHtml = Content;
ToolTipstyle.display = 'Block'
// - 图象过渡 ， 淡入处理 -
var cssopaction = document.all ("msg1"). filtres [0] .opacity
document.all ("msg1"). filtres [0] .opacity = 0;
if (rt) document.all ("msg1"). filtres [1] .Apply ();
if (bt) document.all ("msg1"). filtres [2] .Apply ();
document.all ("msg1"). filtres [0] .opacity = cssopaction;
if (rt) document.all ("msg1"). filtres [1] .play ();
if (bt) document.all ("msg1"). filtres [2] .play ();
// ----------------------
}
}
} catch (e) {}
}
fonction movetomouseloc (e)
{
var scrolltop = getCrollTop ();
var scrollleft = getCrollleft ();
if (ns4 || ns6)
{
x = e.pagex + scrollleft;
y = e.pagey - scrolltop;
}
autre
{
x = event.clientx + scrollleft;
y = event.clienty;
}
if (x-scrollleft> getViewportWidth () / 2) {
x = x - document.getElementById ("ToolTiplayer"). OffsetWidth - 2 * offsetx;
}
if ((y + document.getElementById ("ToolTipPlayer"). OffSetheight + Offsety)> getViewPorthEight ()) {
y = getViewPorthEight () - Document.getElementById ("ToolTipPlayer"). OffSetheight-Offsety;
}
ToolTipStyle.left = (x + offsetx) + 'px';
ToolTipStyle.top = (y + offsey + scrolltop) + 'px';
Retour Vrai;
}
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 / 20095119561534744660_small.jpg' onMouseOver = "ToolSip ('<img src = 2009511956153474660.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 =')") " onMouseout = "toolTip ()"> </a> </div>
</li>
</ul>
</div>
引入 Tooptip.js
复制代码代码如下:
<script linguisse = "javascript" src = "js / toolTip.js"> </ script>
</docy>
</html>
index.css:
复制代码代码如下:
/ * 首页 * /
HTML {Overflow: -moz-Scrollbars-Vertical; } / * Afficher toujours la barre de scroll Firefox * /
corps {police: 12px / 22px "宋体"; Bris de mot: Break-All; Texte-aligne: gauche; Contexte: # C0C0C0; Couleur: # 4E4E4E;}
ul, li {list-style: aucun;}
A {couleur: # 333; text-decoration: aucun;}
A: Hover {Color: # ff722d; text-decoration: aucun;}
IMG {Border: 0;}
un img, a: planer img {border: 0;}
.LaSestWeb {largeur: 980px; marge: 10px auto 0;}
.Latestweb ul {Overflow: Hidden; _Height: 1%;}
.latestweb li {float: gauche; Border: 1px solide #ebeaea; Largeur: 150px; rembourrage: 10px; marge: 14px 14px 0 0; }
.trans_msg {filtre: alpha (opacité = 100, activé = 1) révélation (durée = .2, transition = 1) blendtrans (durée = .2);}
Div.BodyContent {font-Family: Arial, Helvetica, Sans-Serif; padding: 0 10px 10px 13px; couleur: # 555; line-height: 22px; text-align: justify; text-justify: inter -ideography;}
div.bodyContent ul {marge-left: 0px}