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 相关文章推荐
require.js深入了解 require.js特性介绍
Sep 04 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
js仿360开机效果
Dec 26 Javascript
微信小程序地图实现展示线路
Jul 29 Javascript
vue穿梭框实现上下移动
Jan 29 Vue.js
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
重置版战役片段
2020/04/09 魔兽争霸
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
js调用flash的效果代码
2008/04/26 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
python求解水仙花数的方法
2015/05/11 Python
python简单猜数游戏实例
2015/07/09 Python
Python生成密码库功能示例
2017/05/23 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
深入了解Django View(视图系统)
2019/07/23 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
如何基于Python实现自动扫雷
2020/01/06 Python
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
监理员的岗位职责
2013/11/13 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
2014年市场部工作总结
2014/11/25 职场文书
师德师风个人总结
2015/02/06 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
Go语言并发编程 sync.Once
2021/10/16 Golang
Selenium浏览器自动化如何上传文件
2022/04/06 Python
详解CSS3浏览器兼容
2022/12/24 HTML / CSS