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 相关文章推荐
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
js Html结构转字符串形式显示代码
Nov 15 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 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/02/20 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
JavaScript中常见陷阱小结
2010/04/27 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
微信小程序 slider的简单实例
2017/04/19 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
对python:print打印时加u的含义详解
2018/12/15 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
Python restful框架接口开发实现
2020/04/13 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
师范生自我鉴定范文
2013/10/05 职场文书
工作态度检讨书
2014/02/11 职场文书
六一儿童节活动总结
2014/08/27 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
MySQL空间数据存储及函数
2021/09/25 MySQL