tooptip.js :
复制代码代码如下 :
함수 getViewportheight () {
if (window.innerheight! = wind
if (docum
if (document.body) return document.body.clientHeight;
recky window.undefined;
}
함수 getViewportWidth () {
if (window.innerWidth! = wind
if (docum
if (document.body) return document.body.clientWidth;
recky 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 包含在网页 Body 的结束标签后
调用方法 ：
[암호]
<a href = "pages.jpg"target = '_ blank'onMouseOver = "도구 팁 ( '<img src = http : // zhouzh : 90/templet/t_yestem_channel/pages_small.jpg>')"onMouseOut = "thoolTip ()"> img src = 'img'3. 높이 = 20 align = "absmiddle"> </a>
CSS s
复制代码代码如下 :
.trans_msg
{
필터 : 알파 (불투명 = 100, enabled = 1) 공개 트랜스 (duration = .2, transition = 1) blendtrans (duration = .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;
오프셋 = 20;
var TooltipStyle = "";
함수 initTooltips ()
{
tempdiv = document.createElement ( "div");
tempdiv.id = "ToolTipLayer";
tempdiv.style.position = "절대";
tempdiv.style.display = "none";
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);
또 다른
{
ToolTipStyle.visibility = "Visible";
ToolTipStyle.display = "None";
}
document.onmousemove = movetomouseloc;
}
}
기능 툴팁 (MSG, FG, BG)
{
노력하다 {
if (ToolTip.arguments.length <1) // 숨기기
{
if (NS4)
{
ToolTipStyle.visibility = "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 // 쇼
{
if (! fg) fg = "#777777";
if (! bg) bg = "#eeeeee";
var content =
'<table id = "msg1"name = "msg1"cellspacing = "0"cellPadding = "1"bgcolor = "' + fg + '"> <td>' +
'<테이블 셀 스페이스 = "2"CellPadding = "3"bgcolor = "' + bg +
' "> <td> <font face ="arial "color ="' + fg +
' "size ="-2 ">' + msg +
'</font> </td> </table> </td> </table>';
if (NS4)
{
ToolTipStyle.document.write (컨텐츠);
ToolTipStyle.document.close ();
ToolTipStyle.visibility = "Visible";
}
if (ns6)
{
document.getElementById ( "ToolTipLayer"). innerHtml = content;
ToolTipStyle.display = '블록'
}
if (IE4)
{
문서 .ALL ( "ToolTipLayer"). innerHtml = content;
ToolTipStyle.display = '블록'
//- ， ，, 淡入处理-
var cssopaction = document.all ( "msg1"). 필터 [0] .opacity
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 = csopaction;
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)> getViewportheight ()) {
y = getViewportheight ()-Document.GetElementById ( "ToolTipLayer"). 오프 스테이트 오프 스테리;
}
ToolTipStyle.left = (x + offsetx) + 'px';
ToolTipStyle.top = (y + offsety + 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 = "<IMG SRC = image/20095119561534747460.jpg> ') OnMouseOut = "ToolTip ()"> </a> </div>
</li>
<li>
<div> <a href = "http://www.lanrentuku.com/"target = "_ blank"> <img src = 'images/2009551813457815940_small.jpg'onMouseOver = "<Img src = image/2009551813457815940.jectge. OnMouseOut = "ToolTip ()"> </a> </div>
</li>
</ul>
</div>
tooptip.js
复制代码代码如下 :
<script language = "javaScript"src = "js/tooltip.js"> </script>
</body>
</html>
index.css :
复制代码代码如下 :
/*首页*/
html {오버플로 :-Moz-scrollbars-verctical; } /*항상 Firefox 스크롤 바 표시* /
신체 {font : 12px/22px "宋体"; 단어 브레이크 : 브레이크-alf; 텍스트 정렬 : 왼쪽; 배경 :#C0C0C0; 색상 :#4E4E4E;}
ul, li {List 스타일 : 없음;}
A {색상 :#333; 텍스트 결정 : 없음;}
A : 호버 {색상 :#ff722d; 텍스트 결정 : 없음;}
img {border : 0;}
img, a : hover img {border : 0;}
.latestweb {너비 : 980px; 여백 : 10px Auto 0;}
.latestweb ul {오버플로 : 숨겨진; _height : 1%;}
.latestweb li {float : 왼쪽; 국경 : 1px Solid #EBeaea; 너비 : 150px; 패딩 : 10px; 여백 : 14px 14px 0 0; }
.trans_msg {필터 : Alpha (불투명 = 100, enabled = 1) 공개 트랜스 (duration = .2, transition = 1) blendtrans (duration = .2);}
Div. BodyContent {Font-Family : Arial, Helvetica, Sans-Serif; 패딩 : 0 10px 10px 13px; 컬러 :#555; Line-Height : 22px; 텍스트 정렬 : 정당화; 텍스트 조정 :}}
BodyContent ul {margin-left : 0px}