JS实现的车标图片提示效果代码

更新时间：2026-05-11 01:05:09作者：yezheng

本文实例讲述了JS实现的车标图片提示效果。分享给大家供大家参考。具体如下：

这是一款基于JavaScript的鼠标提示效果，名车车标展示提示效果-鼠标移过时显示车标图片，页面打开后并不显示车标，只有当鼠标移在车标上的时候，车标才突然出现，类似Js提示特效，本代码兼容性也写的不错，代码也并不复杂，大部分是调用图片的。

运行效果截图如下：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<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>

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>

<h2>名车车标展示-鼠标移过显示车标</h2>

<ul>

<li>

</li>

<li>

<a href="javascript:;" title="Alfa Romeo 阿尔法-罗米欧"><strong>Alfa Romeo</strong> 阿尔法-罗米欧</a>

</li>

<li>

<a href="javascript:;" title="Skoda 斯柯达"><strong>Skoda</strong> 斯柯达</a>

</li>

<li>

<a href="javascript:;" title="Volkswagen 大众汽车"><strong>Volkswagen</strong> 大众汽车</a>

</li>

<li>

<a href="javascript:;" title="Saab 萨布牌轿"><strong>Saab</strong> 萨布牌轿车</a>

</li>

<li>

<a href="javascript:;" title="Lamborghini 兰博基尼"><strong>Lamborghini</strong> 兰博基尼</a>

</li>

<li>

<a href="javascript:;" title="Porsche 保时捷"><strong>Porsche</strong> 保时捷</a>

</li>

<li>

<a href="javascript:;" title="Peugeot 标致"><strong>Peugeot</strong> 标致</a>

</li>

<li>

<a href="javascript:;" title="Mercedes1 梅赛德斯奔驰"><strong>Mercedes1</strong> 梅赛德斯奔驰</a>

</li>

<li>

<a href="javascript:;" title="Buick 别克汽车"><strong>Buick</strong> 别克汽车</a>

</li>

</ul>

</div>

</body>

</html>

希望本文所述对大家的JavaScript程序设计有所帮助。