گاهی برای شما پیش آمده که بعضی از سایت هایی را مشاهده نمودید که وقتی نشانگر ماوس خود را حرکت می کردید، در کنار نشانگر ماوس متنی به همراه بود و به سمت آن نشانگر در حال حرکت بود. در این پست، کدی برای حرکت نوشته به سمت نشانگر ماوس، نوشته شده است، یعنی در واقع باعث ایجاد دنبال کردن متن انتخابی شما به دور ماوس می باشد. می توانید متن انتخابی تان را عوض نمائید.
نکته: تنها متن لاتین در این کد به درستی عمل می کند.
نمونه ی کد:
<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>
دیدگاه و پرسش