Tip: you can modify some code before running
<!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=utf-8" /><title>Simulate msn dynamic list</title><link type="text/css" rel="stylesheet" href="styles/g.css" /><style type="text/css">. Box {width: 240px; border: 1px solid # ccc; margin: 20px; padding: 20px; float: left ;}. box: hover {border: 1px dashed # ccc;}/* ul1 styles */. ul1 li {height: 20px; line-height: 20px;}/* ul2 styles */. ul2 li {height: 26px; overflow: hidden; cursor: pointer; line-height: 20px; padding-left: 25px ;}. ul2 li img {display: none; border: 1px solid # ccc; float: left; margin-right: 6px ;}. ul2 li p {display: none;} li. ontop {height: 66px;} li. ontop img {display: block; width: 55px; height: 55px;} li. ontop p {display: inline; color: #666 ;}# li1 {background: url (images/bn_ I _ws_015.gif) 0 3px no-repeat ;}# li2 {background: url (images/bn_ I _ws_016.gif) 0 3px no-repeat;} # li3 {background: url (images/bn_ I _ws_017.gif) 0 3px no-repeat;} # li4 {background: url (images/bn_ I _ws_018.gif) 0 3px no-repeat;} # li5 {background: url (images/bn_ I _ws_019.gif) 0 3px no-repeat;} # li6 {background: url (images/bn_ I _ws_0w.gif) 0 3px no-repeat;} # li7 {background: url (images/bn_ I _ws_021.gif) 0 3px no-repeat;} # li8 {background: url (images/bn_ I _ws_022.gif) 0 3px no-repeat;} # li9 {background: url (images/bn_ I _ws_023.gif) 0 3px no-repeat;} # li10 {background: url (images/bn_ I _ws_024.gif) 0 3px no-repeat ;}</style><script type="text/javascript">Function vidiexp (id) {for (I = 1; I <= 10; I ++) {document. getElementById ("li" + I ). className = "";} document. getElementById ("li" + id ). className = "ontop ";}</script></pead><body><div class="box"><ol class="ul2"> <li id="li1" onmouseover="vidiexp(1)"> <p>LG KW820</p> <p>3.2 million shoot high-end Sony Ericsson K800i fell to the bottom</p> </li> <li id="li2" class="ontop" onmouseover="vidiexp(2)"> <p>Samsung SGH-B508</p> <p>3.2 million shoot high-end Sony Ericsson K800i fell to the bottom</p> </li> <li id="li3" onmouseover="vidiexp(3)"> <p>LG KG70 (Shine)</p> <p>3.2 million shoot high-end Sony Ericsson K800i fell to the bottom</p> </li> <li id="li4" onmouseover="vidiexp(4)"> <p>Sony Ericsson G700</p> <p>3.2 million shoot high-end Sony Ericsson K800i fell to the bottom</p> </li> <li id="li5" onmouseover="vidiexp(5)"> <p>Up to U1000</p> <p>3.2 million shoot high-end Sony Ericsson K800i fell to the bottom</p> </li> <li id="li6" onmouseover="vidiexp(6)"> <p>Nokia N95 8 GB</p> <p>3.2 million shoot high-end Sony Ericsson K800i fell to the bottom</p> </li> <li id="li7" onmouseover="vidiexp(7)"> <p>Nokia 6120c</p> <p>3.2 million shoot high-end Sony Ericsson K800i fell to the bottom</p> </li> <li id="li8" onmouseover="vidiexp(8)"> <p>Samsung U608</p> <p>3.2 million shoot high-end Sony Ericsson K800i fell to the bottom</p> </li> <li id="li9" onmouseover="vidiexp(9)"> <p>Motorola A1200</p> <p>3.2 million shoot high-end Sony Ericsson K800i fell to the bottom</p> </li> <li id="li10" onmouseover="vidiexp(10)"> <p>Apple iPhone</p> <p>3.2 million shoot high-end Sony Ericsson K800i fell to the bottom</p> </li> </ol></div></body></ptml>
Tip: you can modify some code before running
