js实现仿百度汽车频道选择汽车图片展示实例
本文实例讲述了js实现仿百度汽车频道选择汽车图片展示的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metacontent="text/html;charset=utf-8"http-equiv="Content-Type"/> <title>让懂车的人帮你选车</title> <styletype="text/css"> *{margin:0;padding:0;} body{font-family:\5B8B\4F53,Tahoma,ArialNarrow,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:0auto;width:978px;height:165px;border:1px#DFE5E7solid;text-align:center;background:url(http://xuanche.baidu.com/static/cms/images/banner.jpg)no-repeatcenter;position:relative;} .single{position:absolute;} .singlea{width:100%;height:100%;display:none;position:absolute;left:-3px;} .singleaspan{position:absolute;bottom:-20px;left:0;width:100%;height:20px;line-height:20px;background:#AE0D00;color:#fff;text-align:center;display:block;border:3px#AE0D00solid;box-shadow:3px2px3px#A0A0A0;} .show{border:3px#AE0D00solid;cursor:pointer;box-shadow:3px2px3px#A0A0A0;} .showa{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;} .maintextp{font-family:"微软雅黑";font-size:19px;font-weight:bold;color:#BBBFC1;} .maintextpspan{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;} .includep{font-size:14px;font-family:"微软雅黑";font-weight:bold;color:#BBBFC1;line-height:30px;} .includepspan{font-size:18px;font-family:Arial,Tahoma,sans-serif;color:#fff;} </style> </head> <body> <!--主体开始--> <divclass="main"> <!--起亚开始--> <divclass="singlecaraa"onmouseover="this.className='singlecaraashow'"onmouseout="this.className='singlecaraa'"> <ahref="#"target="_blank"> <span>起亚K5</span> </a> </div> <!--起亚结束--> <!--英郎开始--> <divclass="singlecarbb"onmouseover="this.className='singlecarbbshow'"onmouseout="this.className='singlecarbb'"> <ahref="#"target="_blank"> <span>英郎</span> </a> </div> <!--英郎结束--> <!--捷达开始--> <divclass="singlecarcc"onmouseover="this.className='singlecarccshow'"onmouseout="this.className='singlecarcc'"> <ahref="#"target="_blank"> <span>捷达</span> </a> </div> <!--捷达结束--> <!--POLO开始--> <divclass="singlecardd"onmouseover="this.className='singlecarddshow'"onmouseout="this.className='singlecardd'"> <ahref="#"target="_blank"> <span>POLO</span> </a> </div> <!--POLO结束--> <!--途观开始--> <divclass="singlecaree"onmouseover="this.className='singlecareeshow'"onmouseout="this.className='singlecaree'"> <ahref="#"target="_blank"> <span>途观</span> </a> </div> <!--途观结束--> <!--科鲁兹开始--> <divclass="singlecarff"onmouseover="this.className='singlecarffshow'"onmouseout="this.className='singlecarff'"> <ahref="#"target="_blank"> <span>科鲁兹</span> </a> </div> <!--科鲁兹结束--> <!--朗逸开始--> <divclass="singlecargg"onmouseover="this.className='singlecarggshow'"onmouseout="this.className='singlecargg'"> <ahref="#"target="_blank"> <span>朗逸</span> </a> </div> <!--朗逸结束--> <!--速腾开始--> <divclass="singlecarhh"onmouseover="this.className='singlecarhhshow'"onmouseout="this.className='singlecarhh'"> <ahref="#"target="_blank"> <span>速腾</span> </a> </div> <!--速腾结束--> <!--宝来开始--> <divclass="singlecarii"onmouseover="this.className='singlecariishow'"onmouseout="this.className='singlecarii'"> <ahref="#"target="_blank"> <span>宝来</span> </a> </div> <!--宝来结束--> <!--福克斯开始--> <divclass="singlecarjj"onmouseover="this.className='singlecarjjshow'"onmouseout="this.className='singlecarjj'"> <ahref="#"target="_blank"> <span>福克斯</span> </a> </div> <!--福克斯结束--> <divclass="maintextfuel"> <p>省<span>油</span></p> </div> <divclass="maintextpower"> <p>动<span>力</span></p> </div> <divclass="maintextcontrol"> <p>操<span>控</span></p> </div> <divclass="include"> <p>共收录<span>389</span>款汽车</p> <p>已有<span>3499</span>名车主点评</p> </div> </div> <!--主体结束--> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。