js实现动画特效的文字链接鼠标悬停提示的方法
更新时间：2015年03月02日 12:22:29 作者：代码家园
这篇文章主要介绍了js实现动画特效的文字链接鼠标悬停提示的方法,实例分析了javascript操作css的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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=gb2312" />
<title>js实现动画效果的文字链接鼠标悬停提示效果</title>
</head>
<body>
<STYLE type="text/css">
<!--
.article {
BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FILTER: revealTrans(transition=23,duration=0.5) blendTrans(duration=0.5); POSITION: absolute; VISIBILITY: hidden
; background-color: #FFCC00; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px}
-->
</STYLE>
<SCRIPT language=JavaScript1.2>
<!--
function Show(divid) {
divid.filters.revealTrans.apply();
divid.style.visibility = "visible";
divid.filters.revealTrans.play();
}
function Hide(divid) {
divid.filters.revealTrans.apply();
divid.style.visibility = "hidden";
divid.filters.revealTrans.play();
}
//-->
</script>
<a href="#" onMouseOver=Show(aaa) onMouseOut=Hide(aaa)>脚本之家</a></div>
<div id="aaa" class="article">脚本之家</div><br>
<a href="#" onMouseOver=Show(bbb) onMouseOut=Hide(bbb)>素材之家</a></div>
<div id="bbb" class="article">素材之家</div><br>
<a href="#" onMouseOver=Show(ccc) onMouseOut=Hide(ccc)>百度搜索</a></div>
<div id="ccc" class="article">百度搜索</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js实现动画效果的文字链接鼠标悬停提示效果</title>
</head>
<body>
<STYLE type="text/css">
<!--
.article {
BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FILTER: revealTrans(transition=23,duration=0.5) blendTrans(duration=0.5); POSITION: absolute; VISIBILITY: hidden
; background-color: #FFCC00; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px}
-->
</STYLE>
<SCRIPT language=JavaScript1.2>
<!--
function Show(divid) {
divid.filters.revealTrans.apply();
divid.style.visibility = "visible";
divid.filters.revealTrans.play();
}
function Hide(divid) {
divid.filters.revealTrans.apply();
divid.style.visibility = "hidden";
divid.filters.revealTrans.play();
}
//-->
</script>
<a href="#" onMouseOver=Show(aaa) onMouseOut=Hide(aaa)>脚本之家</a></div>
<div id="aaa" class="article">脚本之家</div><br>
<a href="#" onMouseOver=Show(bbb) onMouseOut=Hide(bbb)>素材之家</a></div>
<div id="bbb" class="article">素材之家</div><br>
<a href="#" onMouseOver=Show(ccc) onMouseOut=Hide(ccc)>百度搜索</a></div>
<div id="ccc" class="article">百度搜索</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
您可能感兴趣的文章:
- jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
- js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
- js实现鼠标悬停图片上时滚动文字说明的方法
- js实现文字垂直滚动和鼠标悬停效果
- 基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
- Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
- CSS或者JS实现鼠标悬停显示另一元素
- JS实现title标题栏文字不间断滚动显示效果
- js鼠标移动在title中显示图片的效果代码
- 一个JS函数搞定网页标题(title)闪动效果
- js下用层来实现select的title提示属性
- JS实现TITLE悬停长久显示效果完整示例
相关文章
下面小编就为大家带来一篇数组Array的一些方法(总结)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要给大家介绍了JS中可能会常用到的一些数据处理方法,好多知识写下来也能加深一下自身的记忆,文中给出了详细的实例代码,对大家学习或者使用JS具有一定的参考学习价值,需要的朋友可以参考下2021-09-09
本文主要介绍了js中var、let、const之间的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
支持IE和FF的div＋css选项卡...2006-11-11
JavaScript原型对象、构造函数和实例对象功能与用法详解
这篇文章主要介绍了JavaScript原型对象、构造函数和实例对象功能与用法,结合实例形式分析了javascript面向对象相关原型对象、构造函数及实例对象的概念、功能与相关使用技巧,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了javascript实现根据时间段显示问候语的方法,涉及javascript时间与字符串的相关操作技巧,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了新手快速入门JavaScript装饰者模式与AOP,在不改变对象）的情况下动态的为其添加功能,这就是装饰者模式，下面小编带大家来深入学习一下吧2019-06-06
本篇文章主要介绍了微信小程序 scroll-view实现锚点滑动的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
下面小编就为大家带来一篇浅谈js控制li标签排序问题 js调用php函数的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
本文是小编日常读书笔记整理有关javascript知识，都是js精粹非常不错，具有参考借鉴价值，特此分享到脚本之家平台供大家参考2016-06-06
最新评论