160227javascript特效
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了160227javascript特效相关的知识，希望对你有一定的参考价值。
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> 以上是关于160227javascript特效的主要内容，如果未能解决你的问题，请参考以下文章
使用jQuery快速高效制作网页交互特效——02 第二章 JavaScript操作BOM对象
HTML5超炫酷特效天空中白云飘动CSS3特效HTML+CSS+JavaScript