js实现仿百度汽车频道选择汽车图片展示实例

时间：2021-05-26

本文实例讲述了js实现仿百度汽车频道选择汽车图片展示的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///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>   <div class="single cardd" onmouseover="this.className='single cardd show'" onmouseout="this.className='single cardd'" > <a href="#" target="_blank" > <span>POLO</span> </a> </div>   <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程序设计有所帮助。

js实现仿百度汽车频道选择汽车图片展示实例

相关文章

js实现仿百度瀑布流的方法

JS实现仿google、百度搜索框输入信息智能提示的实现方法

百度官宣造车 特斯拉最具竞争力的对手来了

js实现百度联盟中一款不错的图片切换效果完整实例

jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码

百度官宣造车特斯拉最具竞争力的对手来了