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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 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 中文和编码判断代码
2010/05/16 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Python 字典与字符串的互转实例
2017/01/13 Python
详解django自定义中间件处理
2018/11/21 Python
python  logging日志打印过程解析
2019/10/22 Python
python 如何在测试中使用 Mock
2021/03/01 Python
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
土木工程专业自荐信
2013/10/04 职场文书
土建资料员岗位职责
2014/01/04 职场文书
生产操作工岗位职责
2014/09/16 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
Python MNIST手写体识别详解与试练
2021/11/07 Python
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫