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下高性能字符串连接StringBuffer类
Aug 16 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 Javascript
vue常用高阶函数及综合实例
Feb 25 Vue.js
JavaScript 事件捕获冒泡与捕获详情
Nov 11 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
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
php读取3389的脚本
2014/05/06 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
js实现日期级联效果
2014/01/23 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
Bootstrap基础学习
2015/06/16 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
JavaScript类的写法
2016/09/17 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Python中的字典遍历备忘
2015/01/17 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
销售人员个人求职信
2013/09/26 职场文书
结构工程研究生求职信
2013/10/13 职场文书
个人投资计划书
2014/05/01 职场文书
学校文明单位申报材料
2014/05/06 职场文书
事业单位鉴定材料
2014/05/25 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
婚宴祝酒词大全
2015/08/10 职场文书