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 相关文章推荐
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
Vue实现双向数据绑定
May 03 Javascript
详解用node编写自己的cli工具
May 23 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
ES6实现图片切换特效代码
Jan 14 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 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
如何在PHP中使用Oracle数据库(3)
2006/10/09 PHP
分享一下贝贝成长进度的php代码
2012/09/14 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
python实现二维数组的对角线遍历
2019/03/02 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
python ssh 执行shell命令的示例
2020/09/29 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
捐书倡议书
2014/08/29 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
六年级小学生评语
2014/12/26 职场文书
会议主持词开场白
2015/05/28 职场文书
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python