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


Posted in Javascript onMay 06, 2015

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

Javascript 相关文章推荐
正则表达式语法
Oct 09 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 Javascript
jquery动态添加option示例
Dec 30 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
js生成随机数的过程解析
Nov 24 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
js中日期的加减法
May 06 #Javascript
javascript实现回到顶部特效
May 06 #Javascript
javascript实现完美拖拽效果
May 06 #Javascript
avalonjs实现仿微博的图片拖动特效
May 06 #Javascript
avalonjs制作响应式瀑布流特效
May 06 #Javascript
javascript实现简单的html5视频播放器
May 06 #Javascript
js实现的四级左侧网站分类菜单实例
May 06 #Javascript
You might like
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
js 回车提交表单两种实现方法
2012/12/31 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
Python中字符串对齐方法介绍
2015/05/21 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Django 前后台的数据传递的方法
2017/08/08 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
工商学院毕业生个人自我评价
2013/09/19 职场文书
酒店保安员岗位职责
2014/01/31 职场文书
大学四年个人自我小结
2014/03/05 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
小学英语教学反思范文
2016/02/15 职场文书
如何利用React实现图片识别App
2022/02/18 Javascript