سوال: حرکت یک Div و پیدا کردن مختصات Div [بایگانی]

amin7x

شنبه 07 دی 1392, 18:13 عصر

سلام
من میخوام مختصات یک Div رو توی صفحه به وسیله جاوا اسکریپت پیدا کنم کنم و یک Div دیگه رو حرکتش بدم بیاد سمت اون مختصات مورد نظر.
در واقع این طوری میشه:

<div id="logo"></div>
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<div id="place"></div>
میخوام اول مختصات place رو تو صفحه پیدا کنم و بعدش logo رو حرکتش بدم به سمت مختصات place.

همش باید Javascript باشه ممنون میشم در این رابطه کمکم کنید.

Javidhb

یک شنبه 08 دی 1392, 00:52 صبح

//تعریف متغیرها
var target = document.getElementById('place');
var logo = document.getElementById('logo');
var targetTop = target.offsetTop,
logoTop = logo.offsetTop;

//هر 50 هزارم ثانیه یکبار تابع رو اجرا میکنه
var myInterval = setInterval(function(){
if(logoTop < targetTop) //تا وقتی به مقصد نرسیده
{
logo.style.top = ( logoTop++ )+ 'px'; //پایین آوردن دیو
}
else
{
clearInterval(myInterval); //به مقصد رسیده و حرکت باید متوقف بشه
}
}, 60);

دمـــو (http://jsfiddle.net/5rEWd/)

amin7x

یک شنبه 08 دی 1392, 11:51 صبح

//تعریف متغیرها
var target = document.getElementById('place');
var logo = document.getElementById('logo');
var targetTop = target.offsetTop,
logoTop = logo.offsetTop;

//هر 50 هزارم ثانیه یکبار تابع رو اجرا میکنه
var myInterval = setInterval(function(){
if(logoTop < targetTop) //تا وقتی به مقصد نرسیده
{
logo.style.top = ( logoTop++ )+ 'px'; //پایین آوردن دیو
}
else
{
clearInterval(myInterval); //به مقصد رسیده و حرکت باید متوقف بشه
}
}, 60);

دمـــو (http://jsfiddle.net/5rEWd/)

ممنون
ولی توی مرورگر من کار نمیکنه توی کنسول کروم این ارور رو میده:

Uncaught TypeError: Cannot read property 'offsetTop' of null

Javidhb

یک شنبه 08 دی 1392, 19:15 عصر

id المنتها رو چک کنید... مثال بالا فقط در مورد المنتهایی با logo و place کار میکنه...

amin7x

یک شنبه 08 دی 1392, 20:32 عصر

id المنتها رو چک کنید... مثال بالا فقط در مورد المنتهایی با logo و place کار میکنه...

من همون کد دمو رو کپی کردم:

<!DOCTYPE html>
<html>
<head>
<title>Javascript - tutorial</title>
<meta charset='utf-8'>
<script type="text/javascript">
//تعریف متغیرها
var target = document.getElementById('place');
var logo = document.getElementById('logo');
var targetTop = target.offsetTop,
logoTop = logo.offsetTop;

//هر 50 هزارم ثانیه یکبار تابع رو اجرا میکنه
var myInterval = setInterval(function(){
if(logoTop < targetTop) //تا وقتی به مقصد نرسیده
{
logo.style.top = ( logoTop++ )+ 'px'; //پایین آوردن دیو
}
else
{
clearInterval(myInterval); //به مقصد رسیده و حرکت باید متوقف بشه
}
}, 60);
</script>
</head>
<body>
<div id="logo" style="position:absolute;">1</div>
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<div id="place">2</div>
</body>
</html>

بازم جواب نمیده!

Javidhb

یک شنبه 08 دی 1392, 21:19 عصر

<!DOCTYPE html>
<html>
<head>
<title>Javascript - tutorial</title>
<meta charset='utf-8'>

</head>
<body>
<div id="logo" style="position:absolute;">1</div>
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<div id="place">2</div>

<script type="text/javascript">
//تعریف متغیرها
var target = document.getElementById('place');
var logo = document.getElementById('logo');
var targetTop = target.offsetTop,
logoTop = logo.offsetTop;

//هر 50 هزارم ثانیه یکبار تابع رو اجرا میکنه
var myInterval = setInterval(function(){
if(logoTop < targetTop) //تا وقتی به مقصد نرسیده
{
logo.style.top = ( logoTop++ )+ 'px'; //پایین آوردن دیو
}
else
{
clearInterval(myInterval); //به مقصد رسیده و حرکت باید متوقف بشه
}
}, 60);
</script>
</body>
</html>

چون اسکریپتها رو توی head نوشتید... قبل اینکه بخاد div ها رو بسازه .. اسکریپت رو اجرا میکنه.

بهترین راه و اصولی ترین راه حلش مثل کد بالاست ... یعنی اسکریپتها قبل از تگ body/ قرار بگیرن.