JS实现的车标图片提示效果代码_javascript技巧
本文实例讲述了JS实现的车标图片提示效果。分享给大家供大家参考。具体如下：
这是一款基于JavaScript的鼠标提示效果，名车车标展示提示效果-鼠标移过时显示车标图片，页面打开后并不显示车标，只有当鼠标移在车标上的时候，车标才突然出现，类似Js提示特效，本代码兼容性也写的不错，代码也并不复杂，大部分是调用图片的。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-car-ico-alert-style-demo/
具体代码如下：
<!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 id="名车车标展示-鼠标移过显示车标">名车车标展示-鼠标移过显示车标</h2>
<ul>
<li>
<a href="javascript:;" title="BMW 宝马汽车"><strong>BMW</strong>宝马汽车</a>
<img src="/static/imghw/default1.png" data-src="images/1.jpg" class="lazy" alt="BMW 宝马汽车" />
</li>
<li>
<a href="javascript:;" title="Alfa Romeo 阿尔法-罗米欧"><strong>Alfa Romeo</strong> 阿尔法-罗米欧</a>
<img src="/static/imghw/default1.png" data-src="images/2.jpg" class="lazy" alt="Alfa Romeo 阿尔法-罗米欧" />
</li>
<li>
<a href="javascript:;" title="Skoda 斯柯达"><strong>Skoda</strong> 斯柯达</a>
<img src="/static/imghw/default1.png" data-src="images/3.jpg" class="lazy" alt="Skoda 斯柯达" />
</li>
<li>
<a href="javascript:;" title="Volkswagen 大众汽车"><strong>Volkswagen</strong> 大众汽车</a>
<img src="/static/imghw/default1.png" data-src="images/4.jpg" class="lazy" alt="Volkswagen 大众汽车" />
</li>
<li>
<a href="javascript:;" title="Saab 萨布牌轿"><strong>Saab</strong> 萨布牌轿车</a>
<img src="/static/imghw/default1.png" data-src="images/5.jpg" class="lazy" alt="Saab 萨布牌轿" />
</li>
<li>
<a href="javascript:;" title="Lamborghini 兰博基尼"><strong>Lamborghini</strong> 兰博基尼</a>
<img src="/static/imghw/default1.png" data-src="images/6.jpg" class="lazy" alt="Lamborghini 兰博基尼" />
</li>
<li>
<a href="javascript:;" title="Porsche 保时捷"><strong>Porsche</strong> 保时捷</a>
<img src="/static/imghw/default1.png" data-src="images/7.jpg" class="lazy" alt="Porsche 保时捷" />
</li>
<li>
<a href="javascript:;" title="Peugeot 标致"><strong>Peugeot</strong> 标致</a>
<img src="/static/imghw/default1.png" data-src="images/8.jpg" class="lazy" alt="Peugeot 标致" />
</li>
<li>
<a href="javascript:;" title="Mercedes1 梅赛德斯 奔驰"><strong>Mercedes1</strong> 梅赛德斯 奔驰</a>
<img src="/static/imghw/default1.png" data-src="images/9.jpg" class="lazy" alt="Mercedes1 梅赛德斯 奔驰" />
</li>
<li>
<a href="javascript:;" title="Buick 别克汽车"><strong>Buick</strong> 别克汽车</a>
<img src="/static/imghw/default1.png" data-src="images/10.jpg" class="lazy" alt="Buick 别克汽车" />
</li>
</ul>
</div>
</body>
</html>希望本文所述对大家的JavaScript程序设计有所帮助。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何使用JS和百度地图实现地图平移功能
Nov 21, 2023 am 10:00 AM
如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤
Dec 17, 2023 pm 06:55 PM
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
如何使用PHP和JS创建股票蜡烛图
Dec 17, 2023 am 08:08 AM
如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3
PHP与JS开发技巧：掌握绘制股票蜡烛图的方法
Dec 18, 2023 pm 03:39 PM
随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人
如何使用JS和百度地图实现地图热力图功能
Nov 21, 2023 am 09:33 AM
如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP
如何使用JS和百度地图实现地图多边形绘制功能
Nov 21, 2023 am 10:53 AM
如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript
如何使用JS和百度地图实现地图点击事件处理功能
Nov 21, 2023 am 11:11 AM
如何使用JS和百度地图实现地图点击事件处理功能概述：在Web开发中，经常需要使用地图功能来展示地理位置和地理信息。而地图上的点击事件处理是地图功能中常用且重要的一部分。本文将介绍如何使用JS和百度地图API来实现地图的点击事件处理功能，并给出具体的代码示例。步骤：导入百度地图的API文件首先，要在HTML文件中导入百度地图API的文件，可以通过以下代码实现：
