حرکت قلب به دنبال ماوس یا موس

حرکت قلب به دنبال ماوس یا موس

حرکت قلب به دنبال ماوس یا موس با این کد شما میتوانید یک قبل را به دنبال ماوس در سایت به نمایش در بیاورید.یکی از مزیت های این کد نسبت به کدهای دیگه اینه که میشه هر چیزیو باهاش به دنبال ماوس به حرکت در اورد مثلا برگ شکلک استیکر و…

برای اینکار کافیست در کد دنبال ادرس https://dl.codebazan.ir/uploads/1518168665.png بگردید و با عکس مورد نظر خودتون جایگزین کنید.

اگر میخواهید تا عکس شما پس زمینه نداشته باشه بهتره تا فرمت عکس شما png باشه مثل ادرس بالا ک براتون قرار دادم

پیش نمایش کد

<!-----ویرایش عکس و زمان و تعداد نمایش عکس به همراه ماوس از این قسمت----->
<script language="javascript">
var numberimgs=10;          // NUMBER OF TOTAL IMAGES TO FOLLOW THE MOUSE
var begW=80;                // STARTING WIDTH OF THE IMAGES
var endW=40;                // ENDING WIDTH OF THE IMAGES
var begH=40;                // STARTING HEIGHT OF THE IMAGES
var endH=40;                // ENDING HEIGHT OF THE IMAGES
var imgurl='https://dl.codebazan.ir/uploads/1518168665.png';    // YOUR PICTURE NAME. WILL BE AUTOMATICALLY "SCALED" BASED ON ABOVE SETTINGS.
var delay=80;               // SPEED OF TRAIL
var Xoff=-80;               // AMOUNT OF PIXELS TO THE RIGHT IMAGE WILL BE AWAY FROM CURSOR (- VALUES GO TO LEFT)
var Yoff=-80;               // AMOUNT OF PIXELS TO THE BOTTOM IMAGE WILL BE AWAY FROM CURSOR (- VALUES GO UP)

//////////////// NO NEED TO EDIT BEYOND THIS POINT \\\\\\\\\\\\\\\

var ns4=(document.layers)?true:false;
var ns6=(document.getElementById&&navigator.appName.indexOf("Netscape")>=0)?true:false;
var ie4=(document.all&&!document.getElementById)?true:false;
var ie5=(document.all&&document.getElementById)?true:false;
var stepH=(begH-endH)/numberimgs;
var stepW=(begW-endW)/numberimgs;
var xcoord=new Array();
var ycoord=new Array();
for(i=0;i<=numberimgs;i++){ xcoord[i]=0; ycoord[i]=0; }
var mImgs=new Array();

var t='';
for(i=1;i<=numberimgs;i++){
t+=(ns4)?'<layer name="img'+i+'" top="0" left="0" width="'+(begW-(i*stepW-stepW))+'" height="'+(begH-(i*stepH-stepH))+'" z-index="'+(numberimgs-i)+'" visibility="show">':'<div id="img'+i+'" style="position:absolute; top:0px; left:0px; width:'+(begW-(i*stepW-stepW))+'px; height:'+(begH-(i*stepH-stepH))+'px;z-index:'+(numberimgs-i)+'; visibility:visible">';
t+='<img src="'+imgurl+'" width="'+(begW-(i*stepW-stepW))+'" height="'+(begH-(i*stepH-stepH))+'">';
t+=(ns4)?'</layer>':'</div>';
}
document.write(t);

function getmousecoord(evt){
xcoord[1]=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
ycoord[1]=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
if(!ns6)moveid(mImgs[1], xcoord[1], ycoord[1]);
}

function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x;
id.style.top=y;
}}

function moveimgs(){
for(i=numberimgs;i>1;i=i-1){
xcoord[i]=xcoord[i-1]+stepW/2;
ycoord[i]=ycoord[i-1]+stepH/2;
}
for(i=2;i<=numberimgs;i++)moveid(mImgs[i], xcoord[i], ycoord[i]);
}
</script><div style="position:absolute;top:-200%;"><a  href="https://codebazan.ir/">&#1581;&#1585;&#1705;&#1578; &#1602;&#1604;&#1576; &#1576;&#1607; &#1583;&#1606;&#1576;&#1575;&#1604; &#1605;&#1575;&#1608;&#1587;</a></div><script>
window.onload=function(){
  for(i=1;i<=numberimgs;i++)mImgs[i]=(ns4)?document.layers['img'+i]:(ie4)?document.all['img'+i]:document.getElementById('img'+i);
  if(ns4)document.captureEvents(Event.MOUSEMOVE);
  document.onmousemove=getmousecoord;
  if(ns6)setInterval('moveid(mImgs[1],xcoord[1],ycoord[1])',10);
  setInterval('moveimgs()',delay);
}
</script>

برای ویرایش ابعاد و اندازه و سرعت و تعداد قلب به همراه ماوس از ابتدای کد میتوانید تمامی این قسمتهای نام برده را تغییر دهید.

تمامی قسمتها کامنت گذاری شده اند.

مشکلی در جایگذاری و … داشتید در قسمت نظرات مطلب بیان نمایید کمتر از ۲۴ ساعت پاسخ میدم.