Tip: you can modify some code before running
Image effects-move the mouse over the image to enlarge the image<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Image effects-move the mouse over the image to enlarge the image</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">* {Padding: 0; margin: 0;} html {overflow:-moz-scrollbars-vertical;} body {font: 12px/22px ""; word-break: break-all; text-align: left; background: # C0C0C0; color: # 4E4E4E;} ul, li {list-style: none;} a {color: #333; text-decoration: none;} a: hover {color: # ff722d; text-decoration: none;} img {border: 0;} a img, a: hover img {border: 0 ;}. latestWeb {width: 560px; margin: 10px auto 0 ;}. latestWeb ul {overflow: hidden; _ height: 1% ;}. latestWeb li {float: left; border: 1px solid # EBEAEA; width: 150px; padding: 17px 0 14px 22px; margin: 14px 18px 0 0 ;}. trans_msg {filter: alpha (opacity = 100, enabled = 1) revealTrans (duration =. 2, transition = 1) blendtrans (duration =. 2);} div. bodycontent {font-family: Arial, Helvetica, sans-serif; padding: 0 10px 10px 13px; color: #555; line-height: 22px; text-align: justify; text-justify: inter-ideograph;} div. bodycontent ul {margin-left: 0px ;}</style></head><body><!--把下面代码加到<body>与</body>之间--><div class="latestWeb"> <ul> <li> <div >') "OnMouseOut =" toolTip () "></div> </li> <li> <div >') "OnMouseOut =" toolTip () "></div> </li> <li> <div >') "OnMouseOut =" toolTip () "></div> </li> <li> <div >') "OnMouseOut =" toolTip () "></div> </li> <li> <div >') "OnMouseOut =" toolTip () "></div> </li> <li> <div >') "OnMouseOut =" toolTip () "></div> </li> <li> <div >') "OnMouseOut =" toolTip () "></div> </li> <li> <div >') "OnMouseOut =" toolTip () "></div> </li> <li> <div >') "OnMouseOut =" toolTip () "></div> </li> </ul></div><script language="javascript">Function getViewportHeight () {if (window. innerHeight! = Window. undefined) return window. innerHeight; if (document. compatMode = 'css1compat') return document.doc umentElement. 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.doc umentElement. clientWidth; if (document. body) return document. body. clientWidth; return window. undefined;}/*** Gets the real scroll top */function getScrollTop () {if (self. pageYOffset) // all items T Explorer {return self. pageYOffset;} else if (document.doc umentElement & document.doc umentElement. scroll Top) // Explorer 6 Strict {return document.doc umentElement. scrollTop;} else if (document. body) // all other referers {return document. body. scrollTop ;}} function getScrollLeft () {if (self. pageXOffset) // all Records T Explorer {return self. pageXOffset;} else if (document.doc umentElement & document.doc umentElement. scrollLeft) // Explorer 6 Strict {return document.doc umentElement. scrollLeft;} else if (document. Body) // all other referers {return document. body. scrollLeft ;}// -- initialization variable -- var rT = true; // allows the image to transition var bT = true; // allows the image to fade in and out var tw = 150; // width of the prompt box var endaction = false; // end animation var ns4 = document. layers; var ns6 = document. getElementById &&! Document. all; var ie4 = document. all; offsetX = 10; offsetY = 20; var toolTipSTYLE = ""; function 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; else if (ns6) toolTipSTYLE = document. getElementById ("toolTipLa Yer "). style; else if (ie4) toolTipSTYLE = document. all. toolTipLayer. style; if (ns4) document. captureEvents (Event. MOUSEMOVE); else {toolTipSTYLE. visibility = "visible"; toolTipSTYLE. display = "none";} document. onmousemove = moveToMouseLoc;} function toolTip (msg, fg, bg) {try {if (toolTip. arguments. length <1) // hide {if (ns4) {toolTipSTYLE. visibility = "hidden";} else {// -- image transition, fade out processing -- if (! Endaction) {toolTipSTYLE. display = "none";} if (rT) document. all ("msg1 "). filters [1]. apply (); if (bT) document. all ("msg1 "). filters [2]. apply (); document. all ("msg1 "). filters [0]. opacity = 0; if (rT) document. all ("msg1 "). filters [1]. play (); if (bT) document. all ("msg1 "). filters [2]. play (); if (rT) {if (document. all ("msg1 "). filters [1]. status = 1 | document. all ("msg1 "). filters [1]. status = 0) {toolTipSTYLE. displ Ay = "none" ;}} if (bT) {if (document. all ("msg1 "). filters [2]. status = 1 | document. all ("msg1 "). filters [2]. status = 0) {toolTipSTYLE. display = "none" ;}} if (! RT &&! BT) toolTipSTYLE. display = "none"; // ----------------------} else // show {if (! Fg) fg = "#777777"; if (! Bg) bg = "# eeeeee"; var content ='<table id="msg1" name="msg1" border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '" class="trans_msg"><td>'+'<table border="1" cellspacing="2" cellpadding="3" bgcolor="' + bg + '"><td><font face="Arial" color="' + fg + '" size="-2">'+ Msg +'</font></td></table></td></table>'; If (ns4) {toolTipSTYLE.doc ument. write (content); toolTipSTYLE.doc ument. close (); toolTipSTYLE. visibility = "visible";} if (ns6) {document. getElementById ("toolTipLayer "). innerHTML = content; toolTipSTYLE. display = 'block'} if (ie4) {document. all ("toolTipLayer "). innerHTML = content; toolTipSTYLE. display = 'block' // -- image transition, light-in processing -- var cssopaction = document. all ("msg1 "). filters [0]. opacity document. all ("msg1 "). filters [0]. opacity = 0; if (rT) document. all ("msg1 "). filters [1]. apply (); if (bT) document. all ("msg1 "). filters [2]. apply (); document. all ("msg1 "). filters [0]. opacity = cssopaction; if (rT) document. all ("msg1 "). filters [1]. play (); if (bT) document. all ("msg1 "). filters [2]. play (); // ---------------------- }}} catch (e) {}} function moveToMouseLoc (e) {var scrollTop = getScrollTop (); var scrollLeft = getScrollLeft (); if (ns4 | ns6) {x = e. pageX + scrollLeft; y = e. pageY-scrollTop;} else {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 '; return true;} initToolTips ();</script></body></html>
Tip: you can modify some code before running
