首頁 > 開發者 > JavaScript

js實現仿百度汽車頻道選擇汽車圖片展示執行個體

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

js實現仿百度汽車頻道選擇汽車圖片展示執行個體

 　　這篇文章主要介紹了js實現仿百度汽車頻道選擇汽車圖片展示,執行個體分析了javascript滑鼠事件操作css樣式的技巧,非常具有實用價值,需要的朋友可以參考下

　　?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

<!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程式設計有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More