我的一亩三分地 我就喜欢!
13fen  设为主页
 收藏本站
 
当前位置: > 一亩三分地：首页 > 网络学院 > 网页设计 > JS特效 > 制作在状态栏动态提示超链接地址的效果
热门文章排行
热门文章排行 网页上传常见问题分析(11-24)
五彩缤纷建网页（一）(10-11)
五彩缤纷建网页（二）(10-11)
五彩缤纷建网页（三）(10-11)
五彩缤纷建网页（四）(10-11)
精采文章排行
精采文章排行 网页技巧二十例(11-13)
模仿QQ和MSN消息提示的效果(11-13)
根据分辨率不同调用不同的css文件(11-13)
Dreamweaver 基础 ：DW的"文档"工具(11-01)
Dreamweaver 基础 ：DW的"文档"窗口(11-01)
技术专题推荐
网管论坛交流
　

制作在状态栏动态提示超链接地址的效果 

作者:佚名   来源:Linux 宝库   点击:   日期:2006-11-24

-->
一般我们将鼠标移到超链接，IE浏览器的状态栏会出现该链接的详细地址。这篇文章，介绍是如何制作在状态栏动态提示超链接地址的效果，动态效果非常眩。

制作方法：
在<body>中插入Javascript代码：
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var data = "0123456789";
var done = 1;
function statusIn(text) {
decrypt(text, 2, 1);
}

function statusOut() {
self.status = '';
done = 1;
}

function decrypt(text, max, delay) {
if (done) {
done = 0;
decrypt_helper(text, max, delay, 0, max);
}
}
function decrypt_helper(text, runs_left, delay, charvar, max) {
if (!done) {
runs_left = runs_left - 1;
var status = text.substring(0, charvar);
for (var current_char = charvar; current_char < text.length; current_char++) {
status += data.charAt(Math.round(Math.random()*data.length));
}
window.status = status;
var rerun = "decrypt_helper('" + text + "'," + runs_left + "," + delay + "," + charvar + "," + max + ");"
var new_char = charvar + 1;
var next_char = "decrypt_helper('" + text + "'," + max + "," + delay + "," + new_char + "," + max + ");"
if(runs_left > 0) {
setTimeout(rerun, delay);
}
else {
if (charvar < text.length) {
setTimeout(next_char, Math.round(delay*(charvar+3)/(charvar+1)));
}
else {
done = 1;
}
}
}
}
// End -->
</script>

在有超链接处，加入代码：
onMouseOver="statusIn('Goto:[http://www.webjx.com/]');return true;" onMouseOut="statusOut();"
红色代码处为超链接的动态提示效果，你可以做相应的变动。
整个代码为：
<a href="http://www.webjx.com/"
onMouseOver="statusIn('Goto:[http://www.webjx.com/]');return true;"
onMouseOut="statusOut();" target="_blank">网页教学网</a>



【文章评论】 【收藏本文】 【推荐好友】 【打印本文】 【论坛讨论】

   相关文章:
·在状态栏中实现活动文字效果 ·DW+ASP玩转动态二级菜单
·鼠标事件的基础和完美实现 ·DW滑动菜单的制作
·网页里震动的效果怎么做 ·灵活运用DREAMWEAVER的SITE功能

   文章评论:(条)
  
 请留名： 匿名评论   点击查看所有评论 网管论坛
 

  责任编辑:一分  声明：刊登此文章是为了传递更多信息,文章内容仅供参考,转载请注明出处。