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 相关文章推荐
javascript函数库-集合框架
Apr 27 Javascript
JQuery 浮动导航栏实现代码
Aug 27 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
jquery常用操作小结
Jul 21 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
同时提取多条新闻中的文本一例
2006/10/09 PHP
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
PHP中常用的转义函数
2014/02/28 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
热能动力工程毕业生自荐信
2013/11/07 职场文书
中专毕业生自荐信范文
2013/11/28 职场文书
承办会议欢迎词
2014/01/17 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
纯html+css实现Element loading效果
2021/08/02 HTML / CSS
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS