tooptip.js:
复制代码代码如下:
ฟังก์ชั่น getViewPortheight () {
if (window.innerHeight! = window.undefined) ส่งคืน window.innerHeight;
if (document.CompatMode == 'CSS1COMPAT') ส่งคืน Document.documentElement.Clientheight;
if (document.body) ส่งคืน document.body.clientheight;
กลับไปที่หน้าต่างไม่ได้กำหนด;
-
ฟังก์ชั่น getViewportWidth () {
if (window.innerWidth! = window.undefined) ส่งคืน window.innerWidth;
if (document.CompatMode == 'CSS1COMPAT') ส่งคืน Document.DocumentElement.ClientWidth;
if (document.body) ส่งคืน document.body.clientwidth;
กลับไปที่หน้าต่างไม่ได้กำหนด;
-
-
* ได้รับการเลื่อนที่แท้จริง
-
ฟังก์ชั่น getScrolltop () {
ถ้า (self.pageyoffset) // ทั้งหมดยกเว้น Explorer
-
กลับ self.pageyoffset;
-
อื่นถ้า (document.documentelement && document.documentelement.scrolltop)
// Explorer 6 เข้มงวด
-
ส่งคืน Document.documentElement.scrolltop;
-
อื่นถ้า (document.body) // นักสำรวจคนอื่น ๆ ทั้งหมด
-
ส่งคืน document.body.scrolltop;
-
-
ฟังก์ชั่น getScrollleft () {
if (self.pagexoffset) // ทั้งหมดยกเว้น Explorer
-
คืน self.pagexoffset;
-
อื่นถ้า (document.documentelement && document.documentelement.scrollleft)
// Explorer 6 เข้มงวด
-
ส่งคืนเอกสาร. documentelement.scrollleft;
-
อื่นถ้า (document.body) // นักสำรวจคนอื่น ๆ ทั้งหมด
-
ส่งคืน 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>') ความกว้าง = 30 ความสูง = 20 Align = "absmiddle"> </a>
必须 CSS 样式
复制代码代码如下:
.trans_msg
-
ตัวกรอง: alpha (opacity = 100, enabled = 1) reventrans (duration = .2, transition = 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 = "สัมบูรณ์";
tempdiv.style.display = "ไม่มี";
document.body.appendchild (tempdiv);
if (ns4 || ns6 || ie4)
-
if (ns4) tooltipstyle = document.tooltiplayer;
อื่นถ้า (NS6) tooltipstyle = document.getElementById ("tooltiplayer") สไตล์;
อย่างอื่นถ้า (ie4) tooltipstyle = document.all.tooltiplayer.style;
if (ns4) document.captureevents (event.mousemove);
อื่น
-
tooltipstyle.visibility = "มองเห็นได้";
tooltipstyle.display = "ไม่มี";
-
document.onmousemove = movetomouseloc;
-
-
คำแนะนำเครื่องมือฟังก์ชั่น (ผงชูรส, FG, BG)
-
พยายาม {
if (tooltip.arguments.length <1) // ซ่อน
-
ถ้า (NS4)
-
tooltipstyle.visibility = "ซ่อน";
-
อื่น
-
//-图象过渡， 淡出处理-
if (! endaction) {tooltipstyle.display = "ไม่มี";}
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] .lay ();
ถ้า (rt) {
if (document.all ("msg1"). ตัวกรอง [1] .status == 1 || document.all ("msg1"). ตัวกรอง [1] .status == 0) {
tooltipstyle.display = "ไม่มี";}
-
ถ้า (bt) {
if (document.all ("msg1"). ตัวกรอง [2] .status == 1 || document.all ("msg1"). ตัวกรอง [2] .status == 0) {
tooltipstyle.display = "ไม่มี";}
-
if (! rt &&! bt) tooltipstyle.display = "ไม่มี";
-
-
-
อื่น // แสดง
-
if (! fg) fg = "#777777";
if (! bg) bg = "#eeeeee";
VAR เนื้อหา =
'<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 (เนื้อหา);
tooltipstyle.document.close ();
tooltipstyle.visibility = "มองเห็นได้";
-
ถ้า (NS6)
-
document.getElementById ("tooltiplayer"). innerhtml = เนื้อหา;
tooltipstyle.display = 'block'
-
ถ้า (เช่น 4)
-
document.all ("tooltiplayer"). innerhtml = เนื้อหา;
tooltipstyle.display = 'block'
//-图象过渡， 淡入处理-
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 = cssopaction;
if (rt) document.all ("msg1"). ตัวกรอง [1] .play ();
if (bt) document.all ("msg1"). ตัวกรอง [2] .lay ();
-
-
-
} 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)> getViewPorteight ()) {
y = getViewPortheight ()-document.getElementById ("tooltiplayer"). Offsetheight-Offsety;
-
tooltipstyle.left = (x + ออฟเซ็ต) + 'px';
tooltipstyle.top = (y + offsety + scrolltop) + 'px';
กลับมาจริง;
-
inittooltips ();
主页面:
引入 index.css
复制代码代码如下:
<link href = "css/index.css" rel = "stylesheet" type = "text/css"/> >>
<body style = "text-allign: center">
<div>
<ul>
<li>
<div> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = 'images/2009511956153474660_small.jpg' onMouseOver = "tooltip (' onMouseOut = "tooltip ()"> </a> </div>
</li>
<li>
<div> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = 'images/2009551813457815940_small.jpg' onMouseOver = "tooltip ( 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* / /
ร่างกาย {ฟอนต์: 12px/22px "宋体"; คำพูด: break-all; TEXT-ALIGN: ซ้าย; ความเป็นมา:#C0C0C0; สี:#4E4E4E;}
ul, li {list-style: none;}
A {color:#333; การตกแต่งข้อความ: ไม่มี;}
A: โฮเวอร์ {สี:#ff722d; การตกแต่งข้อความ: ไม่มี;}
img {border: 0;}
A IMG, A: HOVER IMG {Border: 0;}
.latestWeb {Width: 980px; มาร์จิ้น: 10px auto 0;}
.latestweb ul {overflow: ซ่อน; _height: 1%;}
.latestweb li {ลอย: ซ้าย; ชายแดน: 1px Solid #EBEAEA; ความกว้าง: 150px; Padding: 10px; มาร์จิ้น: 14px 14px 0 0; -
.trans_msg {ตัวกรอง: alpha (ความทึบ = 100, เปิดใช้งาน = 1) เปิดเผย (ระยะเวลา = .2, การเปลี่ยนแปลง = 1) BlendTrans (Duration = .2);}
div.bodyContent {font-family: Arial, Helvetica, sans-serif; padding: 0 10px 10px 13px; สี:#555; สายไฟ: 22px; text-align: justify; text-justify: inter-ideograph;}}
div.bodycontent ul {margin-left: 0px}