JS实现的车标图片提示效果代码


Posted in Javascript onOctober 10, 2015

本文实例讲述了JS实现的车标图片提示效果。分享给大家供大家参考。具体如下:

这是一款基于JavaScript的鼠标提示效果,名车车标展示提示效果-鼠标移过时显示车标图片,页面打开后并不显示车标,只有当鼠标移在车标上的时候,车标才突然出现,类似Js提示特效,本代码兼容性也写的不错,代码也并不复杂,大部分是调用图片的。

运行效果截图如下:

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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>提示框效果-车标展示提示效果</title>
<style> 
body,div,h2,ul,li{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
ul{list-style-type:none;}
#outer{width:560px;border:1px solid #333;margin:10px auto;padding:0 0 10px 10px;}
#outer h2{line-height:30px;text-align:center;margin-top:10px;}
#outer ul:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
#outer ul{zoom:1;}
#outer ul li{position:relative;float:left;border:1px solid #333;margin:10px 10px 0 0;display:inline;}
#outer ul li img{position:absolute;top:-14px;left:-14px;display:none;border:2px solid #999;cursor:crosshair;}
#outer ul li a{color:#666;width:80px;height:80px;display:block;background:#f0f0f0;text-decoration:none;padding:10px;}
#outer ul li a strong{display:block;}
.zindex{z-index:1;}
</style>
<script> 
window.onload = function ()
{
 var oLi = document.getElementsByTagName("li");
 var oA = document.getElementsByTagName("a");
 var oImg = document.getElementsByTagName("img");
 for (var i = 0; i < oLi.length; i++)
 {
  oA[i].index = oImg[i].index = i;
  oA[i].onmouseover = function() {
   oLi[this.index].className = "zindex";
   oImg[this.index].style.display = "block"
  };
  oA[i].onmouseout = function ()
  {
   oLi[this.index].className = "";
   oImg[this.index].style.display = "none"
  };
  oImg[i].onmouseover = function()
  {
   oLi[this.index].className = "zindex";
   this.style.display = "block" 
  };
  oImg[i].onmouseout = function()
  {
   oLi[this.index].className = "";
   this.style.display = "none" 
  }  
 } 
}
</script>
</head>
<body>
<div id="outer">
 <h2>名车车标展示-鼠标移过显示车标</h2>
 <ul>
 <li>
  <a href="javascript:;" title="BMW 宝马汽车"><strong>BMW</strong>宝马汽车</a>
  <img src="images/1.jpg" alt="BMW 宝马汽车" />
 </li>
 <li>
  <a href="javascript:;" title="Alfa Romeo 阿尔法-罗米欧"><strong>Alfa Romeo</strong> 阿尔法-罗米欧</a>
  <img src="images/2.jpg" alt="Alfa Romeo 阿尔法-罗米欧" />
 </li>
 <li>
  <a href="javascript:;" title="Skoda 斯柯达"><strong>Skoda</strong> 斯柯达</a>
  <img src="images/3.jpg" alt="Skoda 斯柯达" />
 </li>
 <li>
  <a href="javascript:;" title="Volkswagen 大众汽车"><strong>Volkswagen</strong> 大众汽车</a>
  <img src="images/4.jpg" alt="Volkswagen 大众汽车" />
 </li>
 <li>
  <a href="javascript:;" title="Saab 萨布牌轿"><strong>Saab</strong> 萨布牌轿车</a>
  <img src="images/5.jpg" alt="Saab 萨布牌轿" />
 </li>
 <li>
  <a href="javascript:;" title="Lamborghini 兰博基尼"><strong>Lamborghini</strong> 兰博基尼</a>
  <img src="images/6.jpg" alt="Lamborghini 兰博基尼" />
 </li>
 <li>
  <a href="javascript:;" title="Porsche 保时捷"><strong>Porsche</strong> 保时捷</a>
  <img src="images/7.jpg" alt="Porsche 保时捷" />
 </li>
 <li>
  <a href="javascript:;" title="Peugeot 标致"><strong>Peugeot</strong> 标致</a>
  <img src="images/8.jpg" alt="Peugeot 标致" />
 </li>
 <li>
  <a href="javascript:;" title="Mercedes1 梅赛德斯 奔驰"><strong>Mercedes1</strong> 梅赛德斯 奔驰</a>
  <img src="images/9.jpg" alt="Mercedes1 梅赛德斯 奔驰" />
 </li>
 <li>
  <a href="javascript:;" title="Buick 别克汽车"><strong>Buick</strong> 别克汽车</a>
  <img src="images/10.jpg" alt="Buick 别克汽车" />
 </li>
 </ul>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 多浏览器 事件大全
Mar 23 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 Javascript
jqTransform美化表单
Oct 10 #Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 #Javascript
页面内容排序插件jSort使用方法
Oct 10 #Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 #Javascript
js中unicode转码方法详解
Oct 09 #Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 #Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 #Javascript
You might like
yii的CURD操作实例详解
2014/12/04 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
解决vue热替换失效的根本原因
2018/09/19 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
python之信息加密题目详解
2019/06/26 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
温泉秘密:Onsen Secret
2020/07/06 全球购物
临床医学专业学生的自我评价分享
2013/11/21 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
合伙经营协议书范本
2014/04/18 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
公司离职证明范本
2014/10/17 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
公司车队管理制度
2015/08/04 职场文书
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android