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

前端技术 2023/09/05 JavaScript

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

<!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:\\5B8B\\4F53,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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/13805

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案