JS实现文字链接感应鼠标的解密效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML><HEAD><TITLE>JS实现文字链接感应鼠标的解密效果丨石家庄展柜制作|石家庄铜门</TITLE>
    <META content="text/html; charset=gb2312" http-equiv=Content-Type>
    <STYLE>.box {
    BORDER-BOTTOM: #d1d1a4 1px solid; BORDER-LEFT: #d1d1a4 1px solid; BORDER-RIGHT: #d1d1a4 1px solid; BORDER-TOP: #d1d1a4 1px solid; COLOR: red; FONT-SIZE: 20px
    }
    </STYLE>
    <SCRIPT language=JavaScript>
    var data = "0123456789";
    var done = 1;
    function textboxin(text) {
    decrypt(text, 2, 1);
    }
    function textboxout() {
    self.text.value = ‘‘;
    done = 1;
    }
    function decrypt(text, max, delay) //max=2 delay=1
    {
    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 box_text = text.substring(0, charvar);
    for (var current_char = charvar; current_char < text.length; current_char++) {
    box_text += data.charAt(Math.round(Math.random()*data.length));   //利用math对象的随机函数产生"密码"数字串
    }
    window.text.value = box_text;
    //显示超链接的说明内容
    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;
    }
    }
    }
    }
    </SCRIPT>
    <META content="MSHTML 5.00.2920.0" name=GENERATOR></HEAD>
    <BODY>
    <CENTER><BR><BR><A
    href="#" onmouseout=textboxout(); onmouseover="textboxin(‘欢迎光临 ?‘);return true;">鼠标移到此处查看预览效果~~</A><BR><BR><INPUT class=box name=text size=80><BR>
    <BR><P><FONT color=#0099cc face=楷体 size=3>鼠标移到超链接上,对链接的说明内容像解密一样,由一连串的数字慢慢转变为字符.</FONT> </CENTER>
    <P></P></BODY></HTML>
    <br><br><hr>
    
时间: 2024-10-14 21:24:46

JS实现文字链接感应鼠标的解密效果的相关文章

JS插件分享:感应鼠标进入方向图片展示

sHover是一个简单的原生JavaScript插件,它可以让你的展示图片感应鼠标进入方向,从而让悬浮层做出不同的运动效果,多个图片放在一起效果更酷炫噢!它的使用和设置都非常方便,更重要的是它能用在几乎所有的浏览器上啊!(至少IE5及以上吧), 使用简单 sHover是一个纯原生JavaScript编写的小组件,不需要引入JQuery或其他插件就可以使用.使用非常简单,引入sHover的js文件之后,只需一行代码,即可让你的图片展示瞬间炫酷起来 多样设置 有很多不同的效果可以在创建默认的效果之后

文字链接平滑左右移动的效果

鼠标移动到文字连接时会出现向右平滑移动. 例如: html代码 : http://xiong.chexian666.com/ <div class="test"><a href="">test link move</a></div> css代码: .test a{position:relative;background-color:#446CB3; color:#ffffff; padding:10px; text-d

鼠标滑过图片变暗文字链接滑出jQuery特效

效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>鼠标滑过图片变暗文字链接滑出jQuery特效 - HoverTree</title><base target="_blank" /> &l

JQuery实现感应鼠标弹出气泡框悬停提示的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-

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> <title>CSS+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"> <head> <meta http-equiv="Content-

JS打造的弹性跳跃的图片效果且感应鼠标放大

<html> <title>JS打造的弹性跳跃的图片效果且感应鼠标放大丨行车记录仪官网|大疆官网</title> <body> <script> var brOK=false; var mie=false; var aver=parseInt(navigator.appVersion.substring(0,1)); var aname=navigator.appName; var mystop=0; var step=0.2; function

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> <title>JS实现感应鼠标滑动提示层效果丨kiddy

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-T