您的位置:网站主页> Javascript教程 > js文字跟随鼠标特效代码展示

js文字跟随鼠标特效代码展示

时间:2013-05-16 08:04:07   编辑:一切随缘   文章来源:php教程网 已阅读:191 次

编程入门教程[www.ask186.com]网站介绍 

    编程入门教程主要涉及WEB开发领域,主要为广大WEB开发人员提供最新的WEB开发资讯信息,包含php教程mysql教程php面试题在线调色板php学习以及常用( Amazon ApiGoogle Api)等API、爱问资源共享HTML转JS不显示xml...[详细]
广告投放: 编程入门教程:www.ask186.com 电话:15818865556

js文字跟随鼠标特效代码展示:

<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>
 

  • 上一篇:
  • 下一篇:

本文地址:http://www.ask186.com/content/article/js/13297.html(转载请保留)

相关关键词搜索:js文字跟随鼠标特效代码展示

查看评论更多>>
4楼 liujian 2015-04-21 17:34发表
好网站,值得收藏,以后会多多来看,很多文章内容都挺好的!
3楼 niulang 2015-04-21 17:33发表
不论国外,单是我们中国,各种各样的网站数不胜数。打开页面第一个看到的不是你的网站有什么,而是你的整体布局,一个清爽、干净、整洁的页面是一个赢得人心的法宝,大站有大站的气势,小站有小站的风格,好的视觉效果可以告诉人们这个站点有实力,这个站点值得信赖,给人很强的亲和力,有一种发现新宝地,希望赶紧收藏的冲动。
2楼 leenons 2015-04-21 17:28发表
现在看php学习网都会在百度上面找找看评分怎么样,值不值得一看;同时也会将看过的php教程网站记录,有时候留下一些自己的感想的评论,有很多逗比的评论,还有很多专业的评论,建议大家可以在web开发网上面寻找相关文章、api,大部分的内容都还合理。
1楼 xiaobudian 2015-04-21 17:25发表
网站文章挺不错的,值得学习,希望站长多多努力!
发表评论
      
* 以上用户言论只代表其个人观点,不代表www.ask186.com网站的观点或立场
推荐文档更多
编程入门教程 | PHP教程 | Mysql教程 | Apache教程 | 最新文章 | PHP面试题| 网站地图 | Google地图 | Baidu地图 | 在线WEB论坛| 中纪委反腐最新消息

WEB技术QQ交流群:151963186 站长Q号:547214413
版权所有者:编程入门教程 地址:云南省文山州砚山县盘龙乡 滇ICP备12002707号-1
特别声明:本站内容仅供参考,不作为设计及确切依据!想了解更多,可立即进入Bbs提问