Tip: You can modify some of the code before running
JS mouse hover in the picture on the display text prompts the effect of the mouse hover, text prompts this article to recommend a good JS mouse hover in the picture display text hint effect, in many sites can see like NetEase albums have this JS mouse hover effect Oh. <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> Object-oriented </title> <style type=" Text/css "> <!--body {font-size:14px; line-height:24px;margin:0px;padding:0px;} Ul,li{margin:0px;padding:0px;list-style-type:none;} img{border:0px;} h3,p{margin:0px;padding:0px;} h3{margin-top : 50px;} #show {width:724px;height:364px;border: #ccc 1px solid;margin:10px;overflow:hidden;} li{float:left;margin-top:1px; Margin-left:1px;height:180px;width:240px;overflow:hidden;} #show. Alt{position:absolute;background: #000;d isplay:none;text-align:center; A,a:hover{color: #FFFFFF; Text-decoration:none;} --> </style> <script type= "Text/javascript" > function $ (id) {return tyPeof id = = = "string"? document.getElementById (ID): ID;} function $$ (oparent, Elem) {return (Oparent | | document). getElementsByTagName (elem);} function Imglight (ID) {This.odiv =$ (ID); this.oimg=$$ (Odiv, "img"); this.oli=$$ (odiv, "Li"); This.oview=function (OBJ) {var imain=obj; var ispeed=1; var timer=null; Imain.onmouseout=function () {oclose (this);} Timer=setinterval (function () {imain.style.filter= ' alpha (opacity= ' +ispeed+ '); imain.style.opacity=ispeed/100; Ispeed+=1; if (ispeed>=60) {clearinterval (timer);} },1); } this.oclose=function (OBJ) {var omain=obj; var ospeed=60; var otimer=null; Otimer=setinterval (function () {omain.style.filter= ' alpha (opacity= ' +ospeed+ '); omain.style.opacity=ospeed/100; Ospeed-=1; if (ospeed<=0) {clearinterval (otimer); omain.style.display= "None";}; },1); for (Var i=0;i<oli.length;i++) {var othis=oli[i]; Othis.onmouseoveR=function () {var owidth=$$ (this, "img") [0].offsetwidth; var oheight=$$ (This, "img") [0].offsetheight; this.firstchild.style.width=owidth+ "px"; this.firstchild.style.height=oheight+ "px"; this.firstchild.style.display= "Block"; Oview (This.firstchild); } othis.onclick=function () {window.location=$$ (This.firstchild, "a") [0].href; }} window.onload=function () {var newimg=imglight ("Show");} </script> </pead> <body> <div I D= "Show" > <ul> <li><div class= "alt" ><p> the first photo </p><p> long time no see sunflower </p></ div></li> <li><div class= "alt" ><p> second </p><p> pure hand-carved OH </p></div ></li> <li><div class= "alt" ><p> third one </p><p> small bridge water family </p></div> </li> <li><div class= "alt" ><p> fourth one </p><p> another small bridge water family </p></div> </li> <li><div class= "alt" ><p> Fifth </p><p> Hobo coffee shop </p></div></li> <li><div class= "alt" ><p> sixth </p><p> Animal World </p></div></li> </ul> </div> </body> </ptml>< /TD> </tr> </table>
Tip: You can modify some of the code before running
