حرکت متن به دنبال نشانگر ماوس

گاهی برای شما پیش آمده که بعضی از سایت هایی را مشاهده نمودید که وقتی نشانگر ماوس خود را حرکت می کردید، در کنار نشانگر ماوس متنی به همراه بود و به سمت آن نشانگر در حال حرکت بود. در این پست، کدی برای حرکت نوشته به سمت نشانگر ماوس، نوشته شده است، یعنی در واقع باعث ایجاد دنبال کردن متن انتخابی شما به دور ماوس می باشد. می توانید متن انتخابی تان را عوض نمائید.

نکته: تنها متن لاتین در این کد به درستی عمل می کند.

نمونه ی کد:

<html>
    
    <style type="text/css">
        .spanstyle {
            position:absolute;
            visibility:visible;
            top:-50px;
            font-size:15pt;
            font-family:Verdana;
            font-weight:bold;
            color:#cc0000;
        }
        BODY {
            width:100%;
            overflow-x:hidden;
            overflow-y:scroll;
        }
    </style>

<body>
    
    <p align="center">
    <a title='سایت شاه کد' href='https://www.shahcode.com'>حرکت متن دنبال ماوس</a>

    <!-- https://www.shahcode.com -->
    <script type= text/javascript>
        
        var x,y;
        var kern=20; 
        var flag=0;
        var message="Shah Code";
        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 = (e) ? e.pageX : document.body.scrollLeft+event.clientX;
            y = (e) ? e.pageY : document.body.scrollTop+event.clientY;
            flag = 1;
        }
        function makebanner() {
            if (flag==1) {
                for (i=message.length-1; i>=1; i--) {
                    xpos[i]=xpos[i-1] + kern;
                    ypos[i]=ypos[i-1];
                }
                xpos[0]=x+kern;
                ypos[0]=y;
                for (i=0; i<message.length; i++) {
                    if (document.getElementById) {
                        var thisspan = document.getElementById("span"+i).style;
                    } else {
                        var thisspan = eval((document.layers)?"document.span"+i:"span"+(i)+".style");
                        }
                    if (thisspan.posLeft) {
                        thisspan.posLeft=xpos[i];
                        thisspan.posTop=ypos[i];
                    }
                    if (!thisspan.posLeft) {
                        thisspan.left=xpos[i];
                        thisspan.top=ypos[i];
                    }
                }
            }
            var timer=setTimeout("makebanner()",30)
        }
        window.onload=makebanner;
        
        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>


</body>
</html>

حرکت متن به دنبال نشانگر ماوس

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

مطالب زیر را حتما مطالعه کنید

تبدیل اعداد باینری مبنای 2 به دسیمال مبنای 10 در پایتون

بدست آوردن تعداد بیشترین مقسوم علیه با پایتون

تبدیل تمامی حروف یا رشته به بزرگ یا کوچک در پایتون (Python)

محاسبه واریانس و میانگین با ++C

معکوس کردن رشته و آرایه با پایتون

تبدیل سانتیگراد به فارنهایت و بالعکس با ++C

دیدگاهتان را بنویسید لغو پاسخ