简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  js实现仿百度汽车频道选择汽车图片展示实例_javascript技巧

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

WBOY
WBOYOriginal
2016-05-16 16:00:451187browse

本文实例讲述了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程序设计有所帮助。

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析_javascript技巧Next article：使用JS完美实现仿QQ空间评论回复特效

Related articles

See more