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使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
jQuery操作cookie
Aug 08 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 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
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
python如何读取bin文件并下发串口
2019/07/05 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
Python xlwt模块使用代码实例
2020/06/10 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
教室布置标语
2014/06/26 职场文书
师德师风自查材料
2014/10/14 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
慰问信格式
2015/02/14 职场文书
八一建军节慰问信
2015/02/14 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书