TOOPTIP.JS:
复制代码代码如下:
function getViewPortheaith () {
if (window.innerHeight! = window.undefined) return window.innerheight;
if (document.compatmode == 'css1compat') return document.documentelement.clientHeight;
if (document.body) return document.body.clientHeight;
return window.undefined;
}
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;
return window.undefined;
}
/**
* Получает настоящий топ свитка
*/
функция getScrolltop () {
if (self.pageyoffset) // Все, кроме Explorer
{
вернуть self.pageyoffset;
}
else if (document.documentelement && document.documentelement.scrolltop)
// explorer 6 строго
{
return document.documentelement.scrolltop;
}
else if (document.body) // все остальные исследователи
{
return document.body.scrolltop;
}
}
функция getScrollleft () {
if (self.pagexoffset) // Все, кроме Explorer
{
вернуть self.pagexoffset;
}
else if (document.documentelement && document.documentelement.scrollleft)
// explorer 6 строго
{
return document.documentelement.scrollleft;
}
else if (document.body) // все остальные исследователи
{
return document.body.scrollleft;
}
}
/*
[HTML]
渐变的弹出图片
使用方法 ：
将 Tooltip.js 包含在网页 Тело 的结束标签后
调用方法 ：
[код]
<a href = "pages.jpg" target = '_ blank' onmouseover = "tooltip ('<img src = http: // Zhouzh: 90/templet/t_yestem_channel/pages_small.jpg>')" onmouseout = " ширина = 30 высот = 20 align = "absmiddle"> </a>
必须 CSS 样式
复制代码代码如下:
.trans_msg
{
Фильтр: альфа (непрозрачность = 100, включено = 1) Searntrans (продолжительность = .2, переход = 1) blendtrans (продолжительность = .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;
OffSety = 20;
var tooltipstyle = "";
функция inittooltips ()
{
tempdiv = document.createElement ("div");
tempdiv.id = "tooltiplayer";
tempdiv.style.position = "Absolute";
tempdiv.style.display = "none";
document.body.appendchild (tempdiv);
if (ns4 || ns6 || ie4)
{
if (ns4) tooltipstyle = document.tooltiplayer;
иначе if (ns6) tooltipstyle = document.getElementById ("ToolTiplayer"). Стиль;
иначе if (ie4) tooltipstyle = document.all.tooltiplayer.style;
if (ns4) document.captureEvents (event.mouseMove);
еще
{
Tooltipstyle.visibuble = "visible";
Tooltipstyle.display = "none";
}
document.onmouseMove = movetomouseLoc;
}
}
Функциональная подсказка (MSG, FG, BG)
{
пытаться {
if (tooltip.arguments.length <1) // скрыть
{
if (ns4)
{
ToolTipStyle.visibuble = "Hidden";
}
еще
{
//-图象过渡 ， 淡出处理-
if (! endAction) {tooltipstyle.display = "none";}
if (rt) document.all ("msg1"). Фильтры [1] .apply ();
if (bt) document.all ("msg1"). фильтры [2] .apply ();
document.all ("msg1"). Фильтры [0] .opacity = 0;
if (rt) document.all ("msg1"). Фильтры [1] .play ();
if (bt) document.all ("msg1"). фильтры [2] .play ();
if (rt) {
if (document.all ("msg1"). Фильтры [1] .status == 1 || document.all ("msg1"). Фильтры [1] .status == 0) {
Tooltipstyle.display = "none";}
}
if (bt) {
if (document.all ("msg1"). фильтры [2] .status == 1 || document.all ("msg1"). Фильтры [2] .status == 0) {
Tooltipstyle.display = "none";}
}
if (! rt &&! bt) tooltipstyle.display = "none";
// -----------------------
}
}
else // show
{
if (! fg) fg = "#777777";
if (! bg) bg = "#eeeeeee";
var content =
'<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> </table>';
if (ns4)
{
Tooltipstyle.document.Write (Content);
Tooltipstyle.document.Close ();
Tooltipstyle.visibuble = "visible";
}
if (ns6)
{
document.getElementById ("ToolTiplayer"). innerHtml = content;
Tooltipstyle.display = 'block'
}
if (ie4)
{
document.all ("tooltiplayer"). innerhtml = content;
Tooltipstyle.display = 'block'
//-图象过渡 ， 淡入处理-
var cssopaction = document.all ("msg1"). Фильтры [0]
document.all ("msg1"). Фильтры [0] .opacity = 0;
if (rt) document.all ("msg1"). Фильтры [1] .apply ();
if (bt) document.all ("msg1"). фильтры [2] .apply ();
document.all ("msg1"). Фильтры [0] .opacity = cssopaction;
if (rt) document.all ("msg1"). Фильтры [1] .play ();
if (bt) document.all ("msg1"). фильтры [2] .play ();
// -----------------------
}
}
} catch (e) {}
}
функция Movetomouseloc (e)
{
var scrolltop = getscrolltop ();
var scrollleft = getscrollleft ();
if (ns4 || ns6)
{
x = e.pagex + scrollleft;
y = e.pagey - scrolltop;
}
еще
{
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)> getViewPortheaith ()) {
y = getViewportheaith ()-document.getElementById ("ToolTiplayer"). OffSetheight-OffSety;
}
Tooltipstyle.left = (x + offsetx) + 'px';
Tooltipstyle.top = (y + unfsety + scrolltop) + 'px';
вернуть истину;
}
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 = image 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/20095181134578151515151590>'). 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; } /*Всегда показывайте Firefox Scrollbar* /
тело {font: 12px/22px "宋体"; разрыв в словесном: разрыв; Текст-альбом: слева; Фон:#C0C0C0; Цвет:#4e4e4e;}
ul, li {list-style: none;}
{цвет:#333; Текстовое декорация: нет;}
A: Hover {Color:#ff722d; Текстовое декорация: нет;}
img {border: 0;}
a img, a: hover img {border: 0;}
.lateStweb {ширина: 980px; Полевой: 10px auto 0;}
.lateStweb ul {Overflow: Hidden; _Height: 1%;}
.lateStweb li {float: слева; Граница: 1PX SOLID #EBEAEA; Ширина: 150px; Заполнение: 10px; Запас: 14px 14px 0 0; }
.trans_msg {фильтр: альфа (непрозрачность = 100, включено = 1) sependtrans (duration = .2, rening = 1) blendtrans (duration = .2);}
div.bodycontent {font-family: arial, helvetica, sans-serif; накладка: 0 10px 10px 13px; цвет:#555; линейная-высота: 22px; текстовый align: ustify; text-Justify: inter-ideograph;}
div.bodycontent ul {margin-left: 0px}