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:5B8B4F53,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(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程序设计有所帮助。

时间： 2024-08-23 20:11:33

js实现仿百度汽车频道选择汽车图片展示实例的相关文章

js实现仿百度汽车频道选择汽车图片展示实例_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"&

ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测

原文:ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测 一.开篇      在博客注册了三年,今天才决定写第一篇博客,警告自己不要懒!!! 二.关于ArcGIS JS 版本选择      在写这篇博客时ArcGIS JS 4.0正式版已经发布.它和3.x版本的不同是,Map不在是一个控件,而真的只是一张"图",Map(4.0版本)需要在一个View里面来展示,在MapView里面就是一张平面图,在SceneView里面就一张三维地图.同一张地图在

JS实现仿百度输入框自动匹配功能的示例代码介绍

 本篇文章主要是对JS实现仿百度输入框自动匹配功能的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 现在很多网站都有这种效果,在文本框输入一个字符,下边会出来相匹配的内容,这个代码就演示了这个功能是如何完成的,当然,这是个静态的,你可以将提示的内容从数据库读取出来,要用到AJAX那东东.    代码如下: <HTML> <HEAD> <title>带输入匹配的文本框</title> <style> body,div { font

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

本文实例讲述了js实现仿百度瀑布流的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>仿百度图片瀑布流</title> <link rel="stylesheet" type="text/css" href="style.css"&g

js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果_javascript技巧

本文实例讲述了js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果.分享给大家供大家参考.具体如下: 这是一款可在同一页面中多次调用的TAB选项卡代码,仿百度风云榜的TAB切换效果,用到了几张修饰图片,请顺着代码下载所需的图片,然后上传到你的网站中,修改代码内的路径就可以用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-baidu-style-tab-cha-codes/ 具体代码如下: <!DOCTYPE html PUBL

js仿百度有啊通栏展示效果实现代码_javascript技巧

效果图如下: 页面代码: 复制代码 代码如下: <!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 h

js仿百度贴吧验证码特效实例代码_javascript技巧

今天看到有百度验证码挺有意思的,就把它仿下来了. 利用JS实现当选择满4个后自动对比,本文中采用静态对比的方法看你是否全部选择对.然后提示[答案正确!]或[答案错误!], 以后有空再去做成程序,先分享给大家! 效果图如下: 源代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran

js实现仿阿里巴巴城市选择框效果实例

  本文实例讲述了js实现仿阿里巴巴城市选择框效果.分享给大家供大家参考.具体分析如下: 这并不是一个城市选择插件,在这里介绍只是为了mark一下二级联动的方法,此效果适用于有二级子菜单的效果,如导航栏.城市选择.类别选择等等. 样式效果是基于阿里的样式,懒得做其他调整,在area.css中仅仅是为了修改浏览器兼容性略做了一点调整. 城市数据是通过js构造,当然也可以通过后端取得数据,不过感觉没必要. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

JS实现仿PS的调色板效果完整实例_javascript技巧

本文实例讲述了JS实现仿PS的调色板效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码: <html> <head> <style> #colorpad table{ border-collapse:collapse; cellpadding:0; cellspacing:0; width:255px; height:255px; border:0; } #colorpadright table{ border-collapse:collapse;