سبد خرید

بستن سبد خرید

سبد خرید شما خالی است.

تعداد محصول: 0 کل قیمت: تومان0

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

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

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

نمونه ی کد:

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

 

پست های مشابه

19تیر 1400

CSS چیست و نقش آن در طراحی وب سایت که در این پست، طراحی و ساخت سایت را توضیح می دهیم، پس با ما همراه باشید. امروزه نرم افزارهایی برای طراحی وب سایت پدید آمده است که این امکان را می دهد که حتی بدون نیاز به دانش برنامه نویسی وب سایتی تولید و توسعه […]

97

0

28خرداد 1400

نمایش لودینگ یا نوار بارگذاری با CSS ، در این مقاله نحوه ی پروژه ایجاد لودینگ یا نوار بارگذاری کامل صفحه وب که با CSS نوشته شده را توضیح میدهیم.نمایش لودینگ صفحه یا بارگذاری کامل آن Preloader

139

0

27خرداد 1400

این پروژه ی بوم برخورددهنده به این صورت است که وقتی بوم ها یا مربع ها باهم برخورد می کنند…

55

0

دیدگاه و پرسش