?? 4.9 跟隨鼠標的彩色文字.htm
字號:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁</title>
<STYLE>.spanstyle {
COLOR: #0066ff; FONT-FAMILY: 隸書; FONT-SIZE: 14pt; FONT-WEIGHT: normal; POSITION: absolute; TOP: -50px; VISIBILITY: visible
}
</STYLE>
<SCRIPT language=javascript>
var message="歡 迎 參 加 北 京 奧 運 會 ！"; //要跟隨鼠標的文本
var x,y;
var step=15; //文本之間的距離
var flag=0;
message=message.split(""); //將文本切換成數組
var xpos=new Array();
for (i=0;i<=message.length-1;i++) { //設置所有文本的初始x坐標
xpos[i]=-50;
}
var ypos=new Array();
for (i=0;i<=message.length-1;i++) { //設置所有文本的初始Y坐標
ypos[i]=-50;
}
function handlerXY(e) {
//根據瀏覽器的不同，獲取鼠標的x,y坐標
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX+10;
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY;
flag=1;
}
function makesnake() {
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step; //設置文本之間的顯示距離
ypos[i]=ypos[i-1]; //設置文本的y坐標
}
xpos[0]=x+step;
ypos[0]=y;
for (i=0; i<=message.length-1; i++) {
var thisspan = eval("span"+(i)+".style");
thisspan.posLeft=xpos[i];
thisspan.posTop=ypos[i];
thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;
}
}
else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1];
}
xpos[0]=x+step;
ypos[0]=y;
for (i=0; i<message.length-1; i++) //根據字符的個數創建多個span元素，用來顯示字符
{
var thisspan = eval("document.span"+i);
thisspan.left=xpos[i]; //指定span的x坐標
thisspan.top=ypos[i]; //指定span的y坐標
//創建隨機的顏色值
thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;
}
}
}
for (i=0;i<=message.length-1;i++) { //循環輸出文本信息
document.write("<span id='span"+i+"' class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}
if (document.layers) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerXY;
function firstLoad() { //窗體一加載便觸發的事件
makesnake(); //實現跟隨鼠標文本的方法
window.setTimeout("firstLoad();", 5);//定時執行此方法
}
</SCRIPT>
</head>
<body bgcolor="#fef4d9" onload=javascript:firstLoad()>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -