tooptip.js:
复制代码代码如下:
وظيفة getViewPortheight () {
if (window.innerheight! = window.undefined) return window.innerheight ؛
if (document.compatmode == 'css1compat') return document.documentElement.clientheight ؛
if (document.body) return document.body.clientheight ؛
إرجاع نافذة.
}
وظيفة getViewPortWidth () {
if (window.innerwidth! = window.undefined) window.innerwidth ؛
if (document.compatmode == 'css1compat') return document.documentElement.clientwidth ؛
if (document.body) return document.body.clientwidth ؛
إرجاع نافذة.
}
/**
* يحصل على أعلى التمرير الحقيقي
*/
وظيفة getScrollTop () {
إذا (self.pageyoffset) // جميع ما عدا المستكشف
{
إرجاع self.pageyoffset ؛
}
آخر if (document.documentElement && document.documentElement.scrolltop)
// explorer 6 صارم
{
return document.documentElement.scrolltop ؛
}
آخر إذا (document.body) // جميع المستكشفين الآخرين
{
return document.body.scrolltop ؛
}
}
وظيفة getScrollleft () {
إذا (self.pagexoffset) // جميع ما عدا المستكشف
{
إرجاع self.pagexoffset ؛
}
آخر إذا (document.documentElement && document.documentElement.Scrollleft)
// explorer 6 صارم
{
return document.documentElement.scrollleft ؛
}
آخر إذا (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 =" tooltip () العرض = 30 ارتفاع = 20 align = "absmiddle"> </a>
必须 CSS 样式
复制代码代码如下:
.trans_msg
{
مرشح: ألفا (عتامة = 100 ، تمكين = 1) الكشف (المدة = .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 ؛
ذرية = 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 ؛
وإلا
آخر إذا (ie4) tooltipstyle = document.all.tooltiplayer.style ؛
if (ns4) document.captureevents (event.mousemove) ؛
آخر
{
tooltipstyle.visibility = "مرئي" ؛
tooltipstyle.display = "none" ؛
}
document.onmousemove = movetomouseloc ؛
}
}
تلميح أدوات الدالة (MSG ، FG ، BG)
{
يحاول {
if (tooltip.arguments.length <1) // إخفاء
{
إذا (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]. القدرة = 0 ؛
if (rt) document.all ("msg1"). مرشحات [1] .play () ؛
if (bt) document.all ("msg1"). مرشحات [2] .play () ؛
إذا (rt) {
if (document.all ("msg1"). مرشحات [1] .status == 1 || document.all ("msg1"). مرشحات [1] .status == 0) {
tooltipstyle.display = "none" ؛}
}
إذا (bt) {
if (document.all ("msg1"). مرشحات [2] .status == 1 || document.all ("msg1"). مرشحات [2] .status == 0) {
tooltipstyle.display = "none" ؛}
}
if (! rt &&! bt) tooltipstyle.display = "none" ؛
// -----------------------
}
}
آخر // عرض
{
if (! fg) fg = "#777777" ؛
إذا (! bg) bg = "#EEEEEE" ؛
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>' ؛
إذا (NS4)
{
tooltipstyle.document.write (content) ؛
tooltipstyle.document.close () ؛
tooltipstyle.visibility = "مرئي" ؛
}
إذا (NS6)
{
document.getElementById ("tooltiplayer"). innerhtml = content ؛
tooltipstyle.display = 'block'
}
إذا (IE4)
{
document.all ("tooltiplayer"). innerhtml = content ؛
tooltipstyle.display = 'block'
//-图象过渡 ， 淡入处理-
var cssopaction = document.all ("msg1"). المرشحات [0]. القدرة
document.all ("msg1"). مرشحات [0]. القدرة = 0 ؛
if (rt) document.all ("msg1"). مرشحات [1] .apply () ؛
if (bt) document.all ("msg1"). مرشحات [2] .apply () ؛
document.all ("msg1"). مرشحات [0]. القدرة = 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)> getViewPortheight ()) {
y = getViewPortheight ()-document.getElementById ("tooltiplayer"). OffSetheight-Offsety ؛
}
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">
<viv>
<ul>
<li>
<viv> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = 'images/2001111956153474660_small.jpg' onMouseover = "Tooltip ('<img src/2009511956153474747474747474747474747474747474747474. onMouseout = "tooltip ()"> </a> </viv>
</li>
<li>
<viv> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = 'images/' 200951813457815940_small.jpg 'onMouseover = "Tooltip (' <img src/200955181345781540.jp. onMouseout = "tooltip ()"> </a> </viv>
</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 ؛}
A {color:#333 ؛ تخلص النص: لا شيء ؛}
a: hover {color:#ff722d ؛ تخلص النص: لا شيء ؛}
img {الحدود: 0 ؛}
A IMG ، A: Hover IMG {Border: 0 ؛}
.latestWeb {العرض: 980px ؛ الهامش: 10px Auto 0 ؛}
.latestWeb ul {overflow: Hidden ؛ _height: 1 ٪ ؛}
.latestweb li {float: left ؛ الحدود: 1px الصلبة #ebeaea ؛ العرض: 150 بكسل ؛ الحشو: 10 بكسل ؛ الهامش: 14px 14px 0 0 ؛ }
.trans_msg {filter: alpha (عتامة = 100 ، تمكين = 1) الكشف (المدة = .2 ، الانتقال = 1) blendtrans (المدة = .2) ؛}
div.bodyContent {font-family: arial ، helvetica ، sans-serif ؛ padding: 0 10px 10px 13px ؛ color:#555 ؛ line-eigh
div.bodyContent ul {margin-left: 0px}