Heim > Artikel > Web-Frontend > js-Implementierung zur Nachahmung des Baidu-Autokanals zur Auswahl von Beispielen für die Anzeige von Autobildern_Javascript-Fähigkeiten

js-Implementierung zur Nachahmung des Baidu-Autokanals zur Auswahl von Beispielen für die Anzeige von Autobildern_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 16:00:451221Durchsuche

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Nachdem der wangEditor-Editor den Fokus verliert, kann er immer noch die Bildanalyse an der ursprünglichen Position einfügen_Javascript-FähigkeitenNächster Artikel：Nachdem der wangEditor-Editor den Fokus verliert, kann er immer noch die Bildanalyse an der ursprünglichen Position einfügen_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen