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

通过实例展示了JS实现车标图片提示的效果。分享给大家参考。具体如下：

这是一个基于JavaScript的鼠标提示效果，展示的是名车logo的提示效果——鼠标移动时，会显示logo图片，但是打开页面后就不显示logo了。只有当鼠标在logo上移动时，logo才会突然出现，类似于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/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title提示框效果-车标展示提示效果/titlestyle body，div，h2，ul，li { margin:0划水：0;}车身{ font :12 px/1.5 Tahoma；} ul { list-style-type : no；} #外部{ width:560pxborder:1px固体# 333;margin:10px汽车；padding:0 0 10px 10px } #外部H2 {行高：30 px文本对齐：居中；页边距-top :10 px；} #外部ul :在{content:'之后；显示：块；高度：0;clear:both可见性：隐藏；} #外部ul { zoom:1} #外部ul Li { position : relative float : leftborder :1 px固体# 333;margin :10 px 10px 0 0 display : inline } #外部ul Li img { position : absolutetop :-14px；左侧：-14px；display:noneborder:2px固体# 999;光标：十字准线；} #外保险商实验所阿利{ color: # 666宽度：80 px高度：80 px显示：块；背景技术： # f0f 0；文本装饰：无；padding:10px } #外部ul阿利strong { display:block}。zindex { z-index :1}/style脚本窗口。onload=function(){ var OLi=document。getelementsbytagname(' Li ')；var oA=文档。getelementsbytagname(' a ')；var oImg=文档。getelementsbytagname(' img ')；for(var I=0；i oLi.lengthi ) { oA[i].索引=oImg[i].索引=我；办公自动化.onmouseover=function(){ OLi[this。索引].这个.索引]。风格。display=' block ' }；办公自动化.onmouseout=function(){ OLi[this。索引].className=oImg[this。索引]。风格。display=' none ' }；oImg[i].onmouseover=function(){ OLi[this。索引].zindexthis .风格。display=' block ' }；oImg[i].onmouseout=function(){ OLi[this。索引].类名=这个。风格。display=' none ' } } }/script/head dydiv id=' outer ' H2名车车标展示-鼠标移过显示车标/h2 ul阿利href=' javascript: '标题='宝马'宝马汽车强烈的宝马/strong宝马汽车/a img src=' http : images/1。jpg ' alt='宝马宝马汽车//li阿利标题='阿尔法罗密欧'阿尔法-罗米欧强烈的阿尔法罗密欧/strong阿尔法-罗米欧/a img src=' http : images/2。jpg ' alt='阿尔法罗密欧'阿尔法-罗米欧//li阿利标题='斯柯达'斯柯达强烈的斯柯达/strong斯柯达/a img src=' http : images/3。jpg ' alt='斯柯达'斯柯达//li阿利标题='大众'大众汽车强烈的大众/strong大众汽车/a img src=' http : images/4。jpg ' alt='大众大众汽车//li阿利标题='北京汽车股份有限公司萨布牌轿强烈的北京汽车股份有限公司/strong萨布牌轿车/a img src=' http : images/5。jpg ' alt=' Saab萨布牌轿//li阿利兰博基尼兰博基尼强烈的兰博基尼/strong兰博基尼/a img src=' http : images/6。jpg ' alt='兰博基尼兰博基尼//li阿利标题='保时捷保时捷强烈的保时捷/strong保时捷/a img src=' http : images/7。jpg ' alt='保时捷保时捷//li阿利标题='标致'标致强烈的标致/strong标致/a img src=' http : images/8。jpg ' alt='标致标致//li阿利title='Mercedes1梅赛德斯奔驰强烈的描述1/strong梅赛德斯奔驰/a img src=' http : images/9。jpg ' alt=' Mercedes 1 '梅赛德斯奔驰//li阿利标题='别克'别克汽车强烈的别克/strong别克汽车/a img src=' http : images/10。jpg ' alt='别克别克汽车//li /ul/div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。