實現滑鼠滑過文字資訊動態出現
阿新 • • 發佈：2018-12-30
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑鼠滑過文字資訊動態出現</title> <style> *{margin: 0;padding: 0;} ul,ol{list-style: none;} *, *:after, *:before{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .clearfix:after{content: ".";height: 0;overflow: hidden;display: block;clear: both;} *html .clearfix{height: 1%;} .imgtxt li{position: relative;float: left;width: 400px;height: 400px;margin-right: 20px;color: #ccc;line-height: 1.8em;cursor: pointer;transition: all 1s;overflow: hidden;} .imgtxt li img{width: 100%;} .imgtxt li h2{margin: 30px 0 20px 0;font-weight: normal;font-size: 16px;} .imgtxt li p{font-size: 18px;} .imgtxt .text{position: absolute;left: -9999px;top: 0;width: 100%;height: 400px;padding-top: 50px;padding-left: 30px; background: rgba(0,0,0,.5);} </style> <script src="js.js"></script> </head> <body> <ul class="imgtxt" id="imgtxt"> <li> <img src="images/img1.jpg" alt=""> <div class="text"> <h1>卜算子·我住長江頭</h1> <h2>宋代：李之儀</h2> <p>我住長江頭，君住長江尾。<br>日日思君不見君，共飲長江水。<br>此水幾時休，此恨何時已。<br>只願君心似我心，定不負相思意。</p> </div> </li> <li> <img src="images/img2.jpg" alt=""> <div class="text"> <h1>唐多令|惜別</h1> <h2>吳文英</h2> <p>何處合成愁？離人心上秋。<br>縱芭蕉不雨也颼颼。都道晚涼天氣好；有明月，怕登樓。<br>年事夢中休，花空煙水流。<br>燕辭歸、客尚淹留。垂柳不縈裙帶住，漫長是、系行舟。</p> </div> </li> <li> <img src="images/img3.jpg" alt=""> <div class="text"> <h1>清明日對酒</h1> <h2>宋代：高翥</h2> <p>南北山頭多墓田，清明祭掃各紛然。<br>紙灰飛作白蝴蝶，淚血染成紅杜鵑。<br>日落狐狸眠冢上，夜歸兒女笑燈前。<br>人生有酒須當醉，一滴何曾到九泉。</p> </div> </li> </ul> </body> </html>
window.onload=function(){ var imgtxt=document.getElementById("imgtxt"); var lis=imgtxt.getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ (function(arg){ lis[arg].onmouseover=function(){ var text=lis[arg].getElementsByClassName("text")[0]; text.style.left="0px"; }; lis[arg].onmouseout=function(){ var text=lis[arg].getElementsByClassName("text")[0]; text.style.left="-9999px"; }; })(i); } }
匿名函式和函式閉包，用css也可以實現效果……