這篇文章主要介紹了js實現仿百度汽車頻道選擇汽車圖片展示,實例分析了javascript鼠標事件操作css樣式的技巧,非常具有實用價值,需要的朋友可以參考下
?
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 43 44 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 84 85 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 119 120 121 122 123 124 125 126 127 <!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 content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>讓懂車的人幫你選車</title> <style type="text/css" > *{margin:0;padding:0;} body{font-family:5B8B4F53,Tahoma,Arial Narrow,arial,serif;font-size:12px;color:#000;line-height:1.5em;background:#fff;padding-top:100px;} a:link,a:visited,a:hover,a:active{color:#fff;text-decoration:none;} .main{margin:0 auto;width:978px;height:165px;border:1px #DFE5E7 solid;text-align:center;background:url(http://xuanche.baidu.com/static/cms/images/banner.jpg) no-repeat center;position:relative;} .single{position:absolute;} .single a{width:100%;height:100%;display:none;position:absolute;left:-3px;} .single a span{position:absolute;bottom:-20px;left:0;width:100%;height:20px;line-height:20px;background:#AE0D00;color:#fff;text-align:center;display:block;border:3px #AE0D00 solid;box-shadow:3px 2px 3px #A0A0A0;} .show{border:3px #AE0D00 solid;cursor:pointer;box-shadow:3px 2px 3px #A0A0A0;} .show a{display:block;z-index:99;} .caraa{left:5px;top:4px;width:203px;height:151px;} .carbb{left:209px;top:4px;width:101px;height:101px;} .carcc{left:260px;top:106px;width:101px;height:50px;} .cardd{left:362px;top:4px;width:101px;height:50px;} .caree{left:362px;bottom:3px;width:152px;height:102px;} .carff{left:515px;top:4px;width:101px;height:101px;} .cargg{left:515px;bottom:3px;width:101px;height:50px;} .carhh{left:719px;top:4px;width:101px;height:50px;} .carii{left:821px;top:4px;width:145px;height:102px;} .carjj{left:872px;bottom:3px;width:94px;height:50px;} .maintext{position:absolute;width:50px;height:50px;line-height:50px;text-align:center;z-index:1;} .maintext p{font-family:"微軟雅黑";font-size:19px;font-weight:bold;color:#BBBFC1;} .maintext p span{font-size:14px;} .fuel{left:312px;top:58px;} .power{left:620px;top:7px;} .control{left:824px;top:109px;} .include{position:absolute;left:620px;top:58px;width:203px;height:80px;padding-top:20px;} .include p{font-size:14px;font-family:"微軟雅黑";font-weight:bold;color:#BBBFC1;line-height:30px;} .include p span{font-size:18px;font-family:Arial,Tahoma,sans-serif;color:#fff;} </style> </head> <body> <!--主體開始--> <div class="main"> <!--起亞開始--> <div class="single caraa" onmouseover="this.className='single caraa show'" onmouseout="this.className='single caraa'" > <a href="#" target="_blank" > <span>起亞K5</span> </a> </div> <!--起亞結束--> <!--英郎開始--> <div class="single carbb" onmouseover="this.className='single carbb show'" onmouseout="this.className='single carbb'" > <a href="#" target="_blank" > <span>英郎</span> </a> </div> <!--英郎結束--> <!--捷達開始--> <div class="single carcc" onmouseover="this.className='single carcc show'" onmouseout="this.className='single carcc'" > <a href="#" target="_blank" > <span>捷達</span> </a> </div> <!--捷達結束--> <!--POLO開始--> <div class="single cardd" onmouseover="this.className='single cardd show'" onmouseout="this.className='single cardd'" > <a href="#" target="_blank" > <span>POLO</span> </a> </div> <!--POLO結束--> <!--途觀開始--> <div class="single caree" onmouseover="this.className='single caree show'" onmouseout="this.className='single caree'" > <a href="#" target="_blank" > <span>途觀</span> </a> </div> <!--途觀結束--> <!--科魯茲開始--> <div class="single carff" onmouseover="this.className='single carff show'" onmouseout="this.className='single carff'" > <a href="#" target="_blank" > <span>科魯茲</span> </a> </div> <!--科魯茲結束--> <!--朗逸開始--> <div class="single cargg" onmouseover="this.className='single cargg show'" onmouseout="this.className='single cargg'" > <a href="#" target="_blank" > <span>朗逸</span> </a> </div> <!--朗逸結束--> <!--速騰開始--> <div class="single carhh" onmouseover="this.className='single carhh show'" onmouseout="this.className='single carhh'" > <a href="#" target="_blank" > <span>速騰</span> </a> </div> <!--速騰結束--> <!--寶來開始--> <div class="single carii" onmouseover="this.className='single carii show'" onmouseout="this.className='single carii'" > <a href="#" target="_blank" > <span>寶來</span> </a> </div> <!--寶來結束--> <!--福克斯開始--> <div class="single carjj" onmouseover="this.className='single carjj show'" onmouseout="this.className='single carjj'" > <a href="#" target="_blank" > <span>福克斯</span> </a> </div> <!--福克斯結束--> <div class="maintext fuel"> <p>省<span>油</span></p> </div> <div class="maintext power"> <p>動<span>力</span></p> </div> <div class="maintext control"> <p>操<span>控</span></p> </div> <div class="include"> <p>共收錄<span>389</span>款汽車</p> <p>已有<span>3499</span>名車主點評</p> </div> </div> <!--主體結束--> </body> </html>希望本文所述對大家的javascript程序設計有所幫助。