js实现动画特效的文字链接鼠标悬停提示的方法


Posted in Javascript onMarch 02, 2015

本文实例讲述了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>

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

Javascript 相关文章推荐
JavaScript窗口功能指南之在窗口中书写内容
Jul 21 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
简介JavaScript错误处理机制
Aug 04 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 #Javascript
JavaScript定时显示广告代码分享
Mar 02 #Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 #Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 #Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 #Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 #Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 #Javascript
You might like
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
JS取文本框中最小值的简单实例
2013/11/29 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
用python删除java文件头上版权信息的方法
2014/07/31 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
对Python _取log的几种方式小结
2019/07/25 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
英国假发网站:Hothair
2018/02/23 全球购物
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
网站设计师的岗位职责
2013/11/21 职场文书
企业军训感想
2014/02/07 职场文书
委托公证书格式
2015/01/26 职场文书
暖春观后感
2015/06/08 职场文书
会议营销主持词
2015/07/03 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书