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加解密 脚本解密
Feb 22 Javascript
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
js遍历td tr等html元素
Dec 13 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 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
PHP 编写大型网站问题集
2010/05/07 PHP
php中require和require_once的区别说明
2014/02/27 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
javascript事件问题
2009/09/05 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
vue axios用法教程详解
2017/07/23 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
python实现定时播放mp3
2015/03/29 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
Java编程面试题
2016/04/04 面试题
一年级数学教学反思
2014/02/01 职场文书
函授自我鉴定范文
2014/02/06 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
银行求职自荐信范文
2015/03/04 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis