-
-
做能帶來訂單的營銷型網(wǎng)站
其他(360、58、霸屏、搜狗、小程序)等代理合作請發(fā)郵箱254596208@qq.com
<html>
<head>
<title>文字跟隨鼠標(biāo)</title>
<style type="text/css">
<!--
body{
background-color:#FFFFFF;
}
.spanstyle{
color:#2244FF;
font-family:"Courier New";
font-size:18px;
text-decoration:overline underline;
font-weight:bold;
position:absolute; /* 絕對定位 */
top:-50px;
}
-->
</style>
<script language="javascript">
var x,y; //鼠標(biāo)當(dāng)前在頁面上的位置
var step=10; //字符顯示間距，為了好看，step=0則字符顯示沒有間距
var flag=0;
var message="Cascading Style Sheet"; //跟隨鼠標(biāo)要顯示的字符串
message=message.split(""); //將字符串分割為字符數(shù)組
var xpos=new Array() //存儲每個(gè)字符的x位置的數(shù)組
for (i=0;i<message.length;i++) {
xpos[i]=-50;
}
var ypos=new Array() //存儲每個(gè)字符的y位置的數(shù)組
for (i=0;i<message.length;i++) {
ypos[i]=-50;
}
for (i=0;i<message.length;i++) { //動態(tài)生成顯示每個(gè)字符span標(biāo)記,
//使用span來標(biāo)記字符，是為了方便使用CSS，并可以自由的絕對定位
document.write("<span id='span"+i+"' class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
function handlerMM(e){ //從事件得到鼠標(biāo)光標(biāo)在頁面上的位置
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX;
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY;
flag=1;
}
function makesnake() { //重定位每個(gè)字符的位置
if (flag==1 && document.all) { //如果是IE
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step; //從尾向頭確定字符的位置，每個(gè)字符為前一個(gè)字符“歷史”水平坐標(biāo)+step間隔，
//這樣隨著光標(biāo)移動事件，就能得到一個(gè)動態(tài)的波浪狀的顯示效果
ypos[i]=ypos[i-1]; //垂直坐標(biāo)為前一字符的歷史“垂直”坐標(biāo)，后一個(gè)字符跟蹤前一個(gè)字符運(yùn)動
}
xpos[0]=x+step //第一個(gè)字符的坐標(biāo)位置緊跟鼠標(biāo)光標(biāo)
ypos[0]=y
//上面的算法將保證，如果鼠標(biāo)光標(biāo)移動到新位置，則連續(xù)調(diào)用makenake將會使這些字符一個(gè)接一個(gè)的移動的新位置
// 該算法顯示字符串就有點(diǎn)象人類的游行隊(duì)伍一樣，
for (i=0; i<=message.length-1; i++) {
var thisspan = eval("span"+(i)+".style"); //妙用eval根據(jù)字符串得到該字符串表示的對象
thisspan.posLeft=xpos[i];
thisspan.posTop=ypos[i];
}
}
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++) {
var thisspan = eval("document.span"+i);
thisspan.left=xpos[i];
thisspan.top=ypos[i];
}
}
var timer=setTimeout("makesnake()",10) //設(shè)置10毫秒的定時(shí)器來連續(xù)調(diào)用makesnake(),時(shí)刻刷新顯示字符串的位置。
}
document.onmousemove = handlerMM;
</script>
</head>
<body onLoad="makesnake();">
</body>
</html>
掃一掃關(guān)注官方微信建站百科 聯(lián)系我們 網(wǎng)站備案 網(wǎng)站地圖
友情鏈接： 營銷型網(wǎng)站建設(shè) 長沙網(wǎng)站建設(shè)
版權(quán)所有：湖南優(yōu)度網(wǎng)絡(luò)科技有限公司備案號：湘ICP備16004006號-3
微信網(wǎng)站
