This article illustrates the method of JS to realize the effect of mouse-sliding text link color change. Share to everyone for your reference. The implementation methods are as follows:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5, 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11 9 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148-149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171-172 | <! 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> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> mouse move out effect </title> <style> body,ul,h2,p{margin:0; padding:0; font-family: "Microsoft Ya Hei"; Background: #333; {Li{list-style:none} A{text-decoration:none} #box {width:270px;padding:10px 10px 20px; overflow:hidden;margin:20px Auto 0; border:1px solid #FFF; }. internal{width:266px;float:left; #box h2{height:38px;border-bottom:1px solid #ccc; padding-left:5px;} #box H2 Stron g{float:left line-height:38px; color: #885050;} #box H2 a{float:right;width:52px;height:14px; text-indent:20px; Color: #fff; line-height:12px; font-weight:normal;margin-top:10px; #box li{height:30px;position:relative border-bottom:1px dashed #ccc #box Li Div, #box Li p{height:30px;position:abs Olute; Top:0;left:0;width:100%; #box li p{background: #fff; opacity:0 Filter:alpha (opacity=0);} #box Li Div A, #box Li div span{line-height:30px; font- size:12px;height:30px; #box Li Div A {float:left;padding-left:5px color: #7F5454; width:185px; Overflow:hidden} #box Li Div span{padding-rig ht:10px; Float:right;color: #CF9494; } </style> <script type= "Text/javascript" > Window.onload=function () {var d=document; var obox= d.getElementById (' box '); var ali=obox.getelementsbytagname (' Li '); var i=0; for (i=0;i<ali.length;i++) {var op=ali[i].getelementsbytagname (' P ') [0]; op.ialpha=0; op.times=null; ALi[i]. Onmouseover=function () {op=this.getelementsbytagname (' P ') [0]; Op.times && clearinterval (op.times); Op.style.opacity=1; Op.style.filter= "Alpha (opacity=100)"; op.ialpha=100; }; Ali[i].onmouseout=function () {Startmove (This.getelementsbytagname (' P ') [0])}; } }; function Startmove (obj) {obj.times && clearinterval (obj.time); Obj.times=setinterval (function () {domove (obj) ; },10);function Domove (obj) {var ispeed=5; if (obj.ialpha<=ispeed) {clearinterval (obj.times); obj.ialpha=0; obj.time=null ; else {obj.ialpha-=ispeed} obj.style.filter= "Alpha" (opacity= "+obj.ialpha+"); obj.style.opacity=obj.ialpha/100; } </script> </head> <body> <div id= "box" > <div class= "Internal" > <h2><strong > Web Effects code </strong> <a href= "http://www.3lian.net/" >more</a></h2> <ul> <li> <p></p> <div> <a href= "http://www.3lian.net/" > Ad code effect Daquan </a> <span>2011-09-10 </span> </div> </li> <li> <p></p> <div> <a href= "http://www.3lian.net/" > JS Special Effects Code Collection </a> <span>2011-09-10</span> </div> </li> <li> <p></p> <div> <a href= "http://www.3lian.net/" > Commercial Web page templates and CD material </a> <span>2011-09-10</span> </ div> </li> <li> <p></p> <div> <a href= "HTtp://www.3lian.net/"> Web production Tutorials </a> <span>2011-09-10</span> </div> </li> <li> <p></p> <div> <a href= "http://www.j3lian.net/" > website source code download </a> <span> 2011-09-10</span> </div> </li> <li> <p></p> <div> <a href= "http:// www.3lian.net/"> Web ebook download </a> <span>2011-09-10</span> </div> </li> <li> <p ></p> <div> <a href= "http://www.3lian.net/" > Free web Template download </a> <span>2011-09-10</ span> </div> </li> </ul> </div> </div> </body> </html> |
The
wants this article to help you with your JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
