javascript文字跟随鼠标移动简易实现方法

效果图

方法

文字跟随鼠标移动即是实时获取鼠标位置，并将文字的位置设置为鼠标的位置，用left和top即可控制文字的位置。

html

 hint为存放文字的div，必须设置position它才会跟随鼠标的位置移动而移动，一般用absolute。

 

点我DOM
点我JQuery

js

 上面是js的原生方法，下面是jquery方法，两个都可以直接调用执行。 

 

//提示跟随鼠标移动而移动功能

// DOM
function WordsFollowMouseDOM(hintwords) {
    document.addEventListener("mousemove", function (e) {
        var myhint = document.getElementById("hint");
        myhint.style.left = e.clientX + 8 + "px";
        myhint.style.top = e.clientY + 2 + "px";
        switch (hintwords) {
            case 1:
            myhint.innerHTML = "我是文字跟随鼠标1。";
            myhint.style.display = 'block';
            break;
            case 2:
            myhint.innerHTML = "我是文字跟随鼠标2。";
            myhint.style.display = 'block';
            break;
            default:
            myhint.innerHTML = "";
            myhint.style.display = 'none';
            break;
        }
    });
}

// JQuery
function WordsFollowMouseJQuery(hintwords) {
    document.addEventListener("mousemove", function (e) {
        var myhint = $("#hint");
        $(myhint).css({
            "left": e.clientX + 8 + "px",
            "top": e.clientY + 2 + "px"
        });
        switch (hintwords) {
            case 1:
                $(myhint).text("我是文字跟随鼠标3。");
                $(myhint).css({"display":  "block"});
                break;
            case 2:
                $(myhint).text("我是文字跟随鼠标4。");
                $(myhint).css({"display":  "block"});
                break;
            default:
                $(myhint).text("");
                $(myhint).css({"display":  "none"});
                break;
        }
    });
}

$("#clickme1").click(function(){
    WordsFollowMouseDOM(1);
});
$("#clickme2").click(function(){
    WordsFollowMouseJQuery(1);
});

完整代码为：   可直接使用

 

	
	
	
	


	
点我DOM
	
点我JQuery
	

	

 

下载完整代码learning-everything/javascript/word_follow_mouse。