您的位置：首页 > Web前端 > JavaScript

160227、javascript特效

2016-02-26 21:22 549 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航