JS实现的车标图片提示效果代码
本文实例讲述了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>名车车标展示-鼠标移过显示车标</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程序设计有所帮助。
相关推荐
-
js实现基于正则表达式的轻量提示插件
本文实例讲述了基于正则表达式的轻量提示插件,分享给大家供大家参考.具体如下: 这是一款javascript实现基于正则表达式的轻量提示插件,本插件是基于正则表达式进行文本框检测的,通用性十分强,大家可以在实例中进行使用. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 关键代码: $(document).ready(function () { $("#mess
-
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/x
-
JS实现仿google、百度搜索框输入信息智能提示的实现方法
本文实例讲述了JS实现仿google.百度搜索框输入信息智能提示的实现方法.分享给大家供大家参考.具体如下: <!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&qu
-
js实现表单检测及表单提示的方法
本文实例讲述了js实现表单检测及表单提示的方法.分享给大家供大家参考.具体如下: 这是个实用的表单判断以及表单提示效果,如果点击需要输入文字的时候,提示就会跑出来,提示框的形状比较个性化,有一个三角符号指向输入框,有两张图片需要下载. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-check-form-tips-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM
-
js提示信息jtip封装代码，可以是图片或文章
话说本人转行做了前端,于是乎每天都是些div+css啥的.今天就讲讲这个用js实现类似于A标签里的title或alt功能,至于这个功能有什么好处呢,你听我慢慢道来,首先title或alt属性所带来的提示太过于简单,样式也无法修改,而且鼠标要移到元素上等待1至3秒钟才会显示出来,内容也只有简单的文字,无法加入html内容.所以呢,综上所述,只好自己封装一个属于自己的js提示框了.或许你会说jquery不是有个jtip组件吗?不错,那说明你的思想还挺前卫.如果用得习惯的话那就用吧,反正用谁不是用呢?
-
JS实现定时自动关闭DIV层提示框的方法
本文实例讲述了JS实现定时自动关闭DIV层提示框的方法.分享给大家供大家参考.具体分析如下: 这里用JS设定时间去控制指定ID的DIV层是否显示,可以实现一个自动关闭的提示框,时间一到,马上关闭,这样会使你的网页更人性一点,代码其实比你想像的还要简单,就一行代码. <title>自动关闭的DIV层</title> <body onLoad=setTimeout("abc.style.display='none'",5000)> <div id=
-
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/x
-
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"> <
-
JS实现仿新浪微博发布内容为空时提示功能代码
本文实例讲述了JS实现仿新浪微博发布内容为空时提示功能.分享给大家供大家参考.具体如下: 这里使用JavaScript模拟新浪微博的一个功能,在发布微博的内容为空时,文本框提醒用户这里没有输入内容,本功能让人感觉网页很智能,在和你对话一样,很人性化.本特效引用了一个外部了JS封装类,你可下载到本地使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fsina-info-submit-empty-style-codes/ 具体代码如下:
-
JS实现的车标图片提示效果代码
本文实例讲述了JS实现的车标图片提示效果.分享给大家供大家参考.具体如下: 这是一款基于JavaScript的鼠标提示效果,名车车标展示提示效果-鼠标移过时显示车标图片,页面打开后并不显示车标,只有当鼠标移在车标上的时候,车标才突然出现,类似Js提示特效,本代码兼容性也写的不错,代码也并不复杂,大部分是调用图片的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-car-ico-alert-style-demo/ 具体代码如下: <!DOC
-
js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea
-
js钢琴按钮波浪式图片排列效果代码分享
本文实例讲述了js钢琴按钮波浪式图片排列效果.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的钢琴按钮波浪式图片排列效果,鼠标在图片列表上移动,当前图片高亮显示,以此为根基点,周围的图片逐渐变小,所以有种手指划过钢琴键盘的感觉. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 注意:图片的alt属性不能
-
js文字链接的热点提示效果代码
小提示窗口 body{ font-size:12px; } .tip{ color:red; text-decoration:none; position:relative; } .tip span {display:none;} .tip:hover {cursor:hand;} .tip:hover .popbox { display:block; position:absolute; top:15px; left:-30px; width:100px; background-color:#
-
js带前后翻页的图片切换效果代码分享
本文实例讲述了javascript带前后翻页的图片切换效果.分享给大家供大家参考.具体如下: 这是一款基于javascript带前后翻页的图片切换效果代码,实现过程很简单. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/css.css" rel="stylesheet" type=&qu
-
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
本文实例讲述了jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码.分享给大家供大家参考,具体如下: 这是一款仿腾讯网QQ空间装扮预览图片的鼠标提示效果,感应鼠标显示图片的介绍信息,当你把鼠标移到图片上的时候,图片的背景会有所变化,并会显示该图片的对应文字内容,是QQ空间使用过的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-qq-zone-pic-view-codes/ 具体代码如下: <!DOCTYPE html
-
js鼠标点击图片切换效果实现代码
本文实例讲述了js鼠标点击图片切换效果实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: html代码: <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:
-
JS实现超简洁网页title标题跑动闪烁提示效果代码
本文实例讲述了JS实现超简洁网页title标题跑动闪烁提示效果代码.分享给大家供大家参考,具体如下: 这里演示不几行JS代码实现的网页Title文字跑动效果,类似有消息时的标题闪烁提醒功能,在JS代码中,当变量_record累加到3是,将其赋值为1.相当于无限循环.需要显示的消息提示内容可自拟哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-title-blink-style-codes/ 具体代码如下: <html xmlns="
-
js+div实现文字滚动和图片切换效果代码
本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes
-
js实现图片推拉门效果代码实例
初学者. 推拉门是网页中常见的一种形式,通过JS实现比较简单.主要是通过getElement找到节点元素,然后对其进行相应的赋值即可. 新建一个index.html文件,并在同一个目录中添加三个文件夹,images(用来当作"门"的图片),styles(用来存放css文件),scripts(用来存放js文件).然后在index.html中添加代码: <!doctype html> <html> <head> <meta charset=&quo