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模拟弹出效果代码修正版
Aug 07 Javascript
JQuery 学习笔记 选择器之四
Jul 23 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 Javascript
js实现带搜索功能的下拉框
Jan 11 Javascript
vue中的循环对象属性和属性值用法
Sep 04 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实现的ping端口函数实例
2014/11/12 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
php单一接口的实现方法
2015/06/20 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
node.js 发布订阅模式的实例
2017/09/10 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
python爬虫请求头的使用
2020/12/01 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
PHP如何删除一个Cookie值
2012/11/15 面试题
法律工作求职自荐信
2013/10/31 职场文书
应用数学专业求职信
2014/03/14 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
语文复习计划
2015/01/19 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
Nginx缓存设置案例详解
2021/09/15 Servers