1、给网页设定快捷键

js：

function getkey(){
    event = event || window.event;
    url = "www.baidu.com";
    asc = event.keycode;
    key = String.fromCharCode(asc);
    if(key == "G"){
        ret = confirm("您要前往" + url + "页面吗？");
        if(ret){
            window.location = url;
        }
    }
}
document.onkeydown = getkey;
html:
<body>
    请在键盘上按g或者G键！
</body>
2、跟随鼠标移动的图片
js:
function move(){
    mouseX = event.x;
    mouseY = event.y;
    pic.style.left = mouseX;
    pic.style.top = mouseY;
}
document.onmousemove = move;
html:
<body>
    <img src="ok.png" id="pic" style="position:absolute"/>
</body>
3、跟随鼠标移动的文字
js:
text = "跟随鼠标移动的文字";
    j = text.length-1;
    mouseX = 0;
    mouseY = 0;
    function follow(){
        mouseX = event.x;
        mouseY = event.y;
    }
    function move(){
        eval("t" + j).style.left = parseInt(eval("t" + (j-1)).style.left) + 30;
        eval("t" + j).style.top  = parseInt(eval("t" + (j-1)).style.top);
        j--;
        if (j<1){
            j = text.length-1;
            t0.style.left = mouseX + 20;
            t0.style.top  = mouseY + 20;
        }
        setTimeout("move()",5);
    }

document.onmousemove = follow;

html:
<body>
    <script language="javascript">
    for(i=0;i<text.length;i++){
        str = "<div id=t" + i + " style='position:absolute;left=0;top=0;'>";
        str = str + text.charAt(i) + "</div>"
        document.write (str);
    }
    move();
</script>
</body> 
4、动感Loading文字(一个字符一个字符变色显示)
js:
<script type="text/javascript">
    var text = "LOADING...";
    var i = 0;
    function flash(){
        var chr = text.charAt(i);
        chr = "<font size='16px' color='red'>" + chr + "</font>";
        var leftStr = text.substr(0,i);
        var rightStr = text.substr(i+1,text.length -1);
        txt.innerHTML = leftStr + chr + rightStr;
        i++;
        if(i >= text.length){
            i=0;
        }
        //设置定时器
        setTimeout("flash()",500);
    }

</script>

html:
<body onLoad="flash()">
    <div id="txt" style="font-size:40px;color:#ccc;font-family:Arial;padding-left: 50%;padding-top: 20%;"></div>
</body> 
5、逐字显示文字
js:
<script language="javascript">
    text = "逐字显示文字!";
    i = 0;
    function type(){ 
        str  = text.substr(0,i);
        txt.innerHTML = str + "_";
        i++;
        if (i>text.length)i=0;
        setTimeout("type()",300);
    }

</script>

html:
<body onLoad="type()">
    <div id="txt"></div>

</body>

160227、javascript特效的更多相关文章

  1. JavaScript特效（调试笔记）

    JavaScript特效 一.在网页上显示当前的时间日期,例如:“2016年3月26日 星期六”. js源代码: function getTime() { var today = new Date() ...

  2. Canvas与javaScript特效笔记

    第六章   Canvas与javaScript特效笔记 q  <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强 ...

  3. Javascript特效代码大全(420个)（转）

    转载自:Javascript特效代码大全(420个) 收集资料,以便使用+面试+学习  ├ Cookie脚本 ├ 随访问次数变提示 ├ 集成Cookies ├ 使窗口仅弹出一次 ├ 签名提示程序 ├ ...

  4. 【JavaScript】在同一个网页中实现多个JavaScript特效

    在网页中,假设出现两次<script type="text/javascript"></script>标签,全部的JavaScipt脚本都不会再生效,仅仅能 ...

  5. 10种JavaScript特效实例让你的网站更吸引人

    我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预 ...

  6. JavaScript特效源码(1、文字特效)

    注:本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全. 1.逐隐逐现的的特效 逐隐逐现的文字特效[推荐使用][适用于IE4++] (修改显示的文字后根据说明进行共2步 ...

  7. javascript特效——烟花燃放的效果[xyytit]

    春节临近,要做活动促销专题页面,百度了下,找到一些烟花燃放的特效,整理并添加了修改烟花各种参数的注释,便于大家修改使用,版权归原作者所有. 1. 示例效果:点击这里   下载源码:点击这里 2. Ht ...

  8. javascript特效：会随着鼠标而动的眼睛

    这个特效非常简单,其中眼球和眼珠都是特定的图片.只要掌握好距离坐标就没问题.我就直接贴代码,有兴趣的朋友可以自己复制下来运行一下,下面的眼睛图像就是我的文件用到的图像,比较难看..我就把我的代码贴出来 ...

  9. JavaScript特效源码(7、页面特效二)

    7.将站点加入频道栏 将站点加入频道栏[看详细说明] ====1.加入channel的方法:使用如下连接指向你的频道文件*.cdf. <a href="javascript:windo ...

随机推荐

  1. 不可将布尔变量直接与 TRUE、FALSE 或者 1、0 进行比较

    不可将布尔变量直接与 TRUE.FALSE 或者 1.0 进行比较. 根据布尔类型的语义,零值为“假”(记为 FALSE),任何非零值都是“真”(记为 TRUE). TRUE 的值究竟是什么并没有统一 ...

  2. Adobe AIR（跨平台应用）

    Adobe AIR(跨平台应用)现在正式应用于android平台了,Adobe Air是一款独立的客户端应用软件,这些软件可以作为单独的程序安装使用,它可以使开发人员使用HTML.JavaScript ...

  3. perl File::Spec 模块

    File::Spec 模块提供了很多的功能,这里只列举几个常用的函数 rel2abs : 返回一个文件的绝对路径, 常见用法,返回当前运行的perl脚本的绝对路径 代码示例: my $prog = F ...

  4. mac下安装apc并且使用

    1.到网站下载对应PHP版本apc压缩包http://git.php.net/?p=pecl/caching/apc.git;a=commit;h=08e2ce7ab5f59aea483d877e2b ...

  5. 如何使用ChemDraw绘制自由基符号

    ChemDraw软件是一款全球领先的化学绘图工具,能够绘制各种复杂的化学符号和化学结构图形.ChemDraw汉化版结合了中国用户的使用习惯,可以帮助国内化学行业工作者更加轻松快捷地绘制化学图形.本教程 ...

  6. 高级选项更改MathType数学公式样式

    MathType中系统的样式有很多种,我们将通过示例来演示如何更改样式定义达到修改等式的目的.使用样式将允许你迅速且方便的获得一种格式,这种格式将使你创建的等式具有统一的风格. 以下步骤中,我们将创建 ...

  7. js 去掉空格.回车.换行

    Jquery:$("#accuracy").val($("#accuracy").val().replace(/\ +/g,""));//去 ...

  8. fiddler抓包，搞定接口

    上篇介绍的世纪佳缘登录是由已有cookie保持登录状态的.世纪佳缘登陆不需要填入验证码,可以很方便直接请求登录接口来达到登录状态的目的. 这篇介绍直接从登录接口进行登录,那么这就要求要找到登录接口ur ...

  9. makefile--参数传递、条件判断、include （五）

    原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/ 在多个Makefile嵌套调用时,有时我们需要传递一些参数给下一层Makefile.比如我们在顶 ...

  10. nyoj-655-光棍的yy(大数)

    光棍的yy 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描写叙述 yy常常遇见一个奇怪的事情.每当他看时间的时候总会看见11:11,这个非常纠结啊. 如今给你m个1,你能够 ...