文字跟隨滑鼠網頁設計javascript_JavaScript的文字跟隨滑鼠

1、網頁製作javascript滑鼠經過文字變色問題

上面已經設置了td,th文字顏色屬性，

這里又設置了顏色屬性，不過行內樣式優先，可以改成style="color=blue;............"，這時即：

這時顏色body,td,thcolor屬性已經不起作用了也可以下面這樣，去掉行內style="color:#999",行內的color屬性去掉前邊color設置成你要的其實顏色。

有點亂，希望有幫助！

2、JavaScript編寫網頁時如何實現一行文字隨滑鼠移動

setTimeout執行一次
setInterval

3、網頁中文字跟隨滑鼠並滾動怎麼做？

4、JavaScript的文字跟隨滑鼠

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字跟隨滑鼠移動的效果</title>
<style type="text/css">
/*文字的格式*/
.spanstyle{
position:absolute;
display:none;
top:50px;/*初始化的時候所有的對象均為不可視*/
left:50px;
font-size:9pt;
color:red;
font-weight:200px;
}
</style>
<script type="text/javascript">
var x,y;//定義全局變數保存滑鼠的坐標
step=20;
var message="幸福只需要一點點，否則就象是手中握著一把滿滿的沙子，握的越緊，代表幸福的沙子就會更快的從指尖滑落。";
//把字元串分割成數組
message=message.split("");
var xPosition=new Array();//記錄X軸的坐標
var yPosition=new Array();//記錄Y軸的坐標
//初始化數組
for(var i=0;i<message.length;i++){
xPosition[i]=-50;
yPosition[i]=-50;
}

//函數-方法得到滑鼠當前在頁面中的位置
function handlerMouseLocation(){
//得到滑鼠相對於頁面的位置防止滾動條的拖動
x=document.body.scrollLeft+event.clientX;
y=document.body.scrollTop+event.clientY;
}

function makesnake(){ //函數文字跟隨滑鼠浮動的效果的方法
xPosition[0]=x+step;//在滑鼠的X軸的基礎之上加上20
yPosition[0]=y-15;//Y軸和滑鼠相同

//依次從後向前賦值達到浮動的效果
for(var i=message.length-1;i>=1;i--){

xPosition[i]=xPosition[i-1]+step;
yPosition[i]=yPosition[i-1];
}

//設定span的位置
for(var i=0;i<message.length;i++){
var thisspan=eval("span"+(i)+".style");//獲得滑鼠對象的引用
thisspan.display="block";
thisspan.pixelTop=yPosition[i]+step;
thisspan.pixelLeft=xPosition[i];
}
setTimeout("makesnake()",10);//延時才能達到浮動的效果
setTimeout("ChangeTextColor()",10);

}

function ChangeTextColor(){
var Initialization=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");

for(var i=0;i<message.length;i++){
var a=Math.round(Math.random()*14+1);
var b=Math.round(Math.random()*14+1);
var c=Math.round(Math.random()*14+1);
var d=Math.round(Math.random()*14+1);
var e=Math.round(Math.random()*14+1);
var f=Math.round(Math.random()*14+1);
var thisspan=eval("span"+(i)+".style");//獲得滑鼠對象的引用
var ww=Initialization[a]+""+Initialization[b]+""+Initialization[c]+""+Initialization[d]+""+Initialization[e]+""+Initialization[f];
thisspan.color="#"+ww;
document.getElementById("my").innerText="#"+ww;
}
}
</script>
</head>

<body>
<script type="text/javascript">
//將span內容寫到界面上
for(var i=0;i<message.length;i++){
document.write("<span id='span"+i+"' class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}
document.onmousemove=handlerMouseLocation;
makesnake();//調用方法
</script>
<span id="my"></span>
</body>
</html>

5、javascript中跟隨滑鼠移動的文字

pageX:FF特有，滑鼠在頁面上的位置，從頁面左上角開始定位，這個可以很方便在整個頁面上進行定位，IE沒有直接替換的屬性。

document.layers是判斷NETSPACE瀏覽器的
如果是FF就取e.pageX,IE就取後面的那個值

6、一個關於Javascript 文字跟隨滑鼠移動的問題

這是獲取下面span標簽的ID，因為你下面輸出的時候是 document.write("<span id='span" + i + "'class='spanstyle'>");
所以你上面要用那樣的方法循環獲取這個標簽的ID，
span" + (i) + ".style這句話意思：
例如i=1這句話就是span1.style

7、網頁製作中,怎麼讓字跟隨滑鼠還有……

第一個的答案（修改var message="★★★高二（6）班歡迎您★★★"里的內容為你想說的話就可以了，其他的不用動）：
<SCRIPT>
var x,y
var step=18
var flag=0
var message="★★★高二（6）班歡迎您★★★"

message=message.split("")
var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50
}

var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-200
}

function handlerMM(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
flag=1
}

function www_helpor_net() {
if (flag==1 && document.all) {
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("span"+(i)+".style")
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("www_helpor_net()",30)
}

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 = handlerMM;
www_helpor_net();
// -->
</SCRIPT>
第二個問題你說的不清楚

8、製作網頁時如何讓滑鼠後面跟著一行字,一直跟著滑鼠,滾動滑鼠滾輪的時候也一直跟著，加了很多代碼試了，科

估計是瀏覽器不兼容
下面這個我親測可以的哦
<html>
<head>
<title>文字跟隨滑鼠</title>
<style type="text/css">

</style>
<script language="javascript">
var x,y;//滑鼠當前在頁面上的位置
var step=10;//字元顯示間距，為了好看，step=0則字元顯示沒有間距
var message="Cascading Style Sheet";//跟隨滑鼠要顯示的字元串
message=message.split("");//將字元串分割為字元數組
var xpos=new Array()//存儲每個字元的x位置的數組
for (i=0;i<message.length;i++) {
xpos[i]=-50;
}
var ypos=new Array()//存儲每個字元的y位置的數組
for (i=0;i<message.length;i++) {
ypos[i]=-50;
}
for (i=0;i<message.length;i++) { //動態生成顯示每個字元span標記,
//使用span來標記字元，是為了方便使用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){ //從事件得到滑鼠游標在頁面上的位置
e=e||window.event;
x = (document.layers) ? e.pageX : document.body.scrollLeft+e.clientX;
y = (document.layers) ? e.pageY : document.body.scrollTop+e.clientY;
}
function makesnake() { //重定位每個字元的位置
if (document.all) { //如果是IE
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step; //從尾向頭確定字元的位置，每個字元為前一個字元「歷史」水平坐標+step間隔，
//這樣隨著游標移動事件，就能得到一個動態的波浪狀的顯示效果
ypos[i]=ypos[i-1]; //垂直坐標為前一字元的歷史「垂直」坐標，後一個字元跟蹤前一個字元運動
}
xpos[0]=x+step //第一個字元的坐標位置緊跟滑鼠游標
ypos[0]=y
//上面的演算法將保證，如果滑鼠游標移動到新位置，則連續調用makenake將會使這些字元一個接一個的移動的新位置
// 該演算法顯示字元串就有點象人類的遊行隊伍一樣，
for (i=0; i<=message.length-1; i++) {
var thisspan = eval("span"+(i)+".style"); //妙用eval根據字元串得到該字元串表示的對象
thisspan.posLeft=xpos[i];
thisspan.posTop=ypos[i];
}
}
else{
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 = document.getElementById("span"+i).style;
thisspan.left=xpos[i];
thisspan.top=ypos[i];
}
}
var timer=setTimeout("makesnake()",10) //設置10毫秒的定時器來連續調用makesnake(),時刻刷新顯示字元串的位置。
}
document.onmousemove = handlerMM;
</script>
</head>
<body onLoad="makesnake();">
</body>
</html>

9、跟隨滑鼠走的文字的HTML代碼？急！！！

<html>

<head>
<title>跟著滑鼠走的文字</title>
</head>

<style type="text/css">
.spanstyle {
position:absolute;
visibility:visible;
top:-50px;
font-size:12pt; font-family:隸書;
color: 000012;
font-weight:bold;
}</style>
<script>

var x,y
var step=20
var flag=0
var message="跟著滑鼠走的文字 "
message=message.split("")
var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50}
var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-50}
function handlerMM(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
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] }
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] } }
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()",30)}
</script>
<body onLoad="makesnake()" >
<script>
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 = handlerMM;
</script>

<body>

</body>

</html>
剛好我有，把這個保存為html文件就好！

10、隨滑鼠飄浮移動文字的javascript 源代碼

<html>

<head><script>
var x,y
var step=40
var flag=0
var message="歡迎我的網站"
message=message.split("")
var xpos=new Array()
for (i=0;i<=message.length;i++) {
xpos[i]=-50}
var ypos=new Array()
for (i=0;i<=message.length;i++) {
ypos[i]=-50}
function handlerMM(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
flag=1}
function makeit() {
if (flag==1 && document.all) {

for (i=message.length; 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; i++) {

var thisspan = eval("span"+(i)+".style")

thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
} }
else if (flag==1 && document.layers) {

for (i=message.length; 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; i++) {

var thisspan = eval("document.span"+i)

thisspan.left=xpos[i]
thisspan.top=ypos[i]} }
var timer=setTimeout("makeit()",30)}

for (i=0;i<=message.length;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 = handlerMM;
</script>

<title>跟隨滑鼠的飄帶文字</title>
<style type="text/css">
.spanstyle {position:absolute;visibility:visible;top:-50px;font-size:9pt;color: #c800c0;font-weight:bold;}</style>
</head>

<body onLoad="makeit()">

</body>
</html>

導航:首頁 > 萬維百科 > 文字跟隨滑鼠網頁設計javascript

文字跟隨滑鼠網頁設計javascript

與文字跟隨滑鼠網頁設計javascript相關的知識