文字跟随鼠标网页设计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相关的知识