160227、javascript特效

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>