PDA

View Full Version : onmouseover برای حرکت دادن div


ramin149
دوشنبه 09 اسفند 1389, 12:56 عصر
سلام دوستان اگر میشه یکی به من کمک کنه چون من توی جاوا اسکریپت خوب نیستم و زیاد کار نکردم
من چند تا div در صفحه دارم و می خوام وقتی کاربر روی آنها رفت 10 پیکسل به سمت بالا بره
این کد یکی از div های من که ببینید به چه صورت در صفحه قرار دادم


<div style="width: 296px; height: 438px; position: absolute; top: 232px; left: 208px; "
ID="home">

</div>

و کد زیر هم اسکریپتی که نوشتم و کار هم نمی کنه و البته با id کار می کنه و نمی خوام این شکلی باشه ؟

<script language="javascript" type="text/javascript">
function up() {
var mytag = document.getElementById("home");
mytag.style.top += 10;
}
</script>
tux-world
دوشنبه 09 اسفند 1389, 13:25 عصر
اینو تست کن :
<script type="text/javascript">
$(document).ready(function()
{
$('#home').hover(function() { $(this).stop().animate({ top: -20 }, 'fast'); });
}
</script>
ramin149
دوشنبه 09 اسفند 1389, 13:30 عصر
اگر این تابع به این صورت تعریف می شه که در بالا صفحه قرار بدییم و یک div با id="home" وجود داشته باشه و با آوردن موس div به بالا حرکت کنه ، این کار انجام نمی شه
tux-world
دوشنبه 09 اسفند 1389, 13:51 عصر
اینو اضافه کنید اولش :
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>

تست کردم جواب داد
ramin149
دوشنبه 09 اسفند 1389, 13:54 عصر
آیا این دستور jquery اگر هست کتابخانه ای نمی خواد ؟
tux-world
دوشنبه 09 اسفند 1389, 14:01 عصر
گفتم که اون خط رو به اول اسکریپت اضافه کن
ramin149
دوشنبه 09 اسفند 1389, 14:16 عصر
خیلی ببخشید که تو زحمت افتادید من نمی دونم کجای کار رو اشتباه انجام دادم که نمی شه اگر امکانش هست فایل که تست کردید رو در سایت قرار دهید
tux-world
دوشنبه 09 اسفند 1389, 16:13 عصر
بفرمایید: البته روی فایرفاکس جواب میده. ie هم که ازش متنفرم نمیدونم باید از بقیه دوستان بپرسید
<html>
<head>
<style>
.text_tooltip
{
width:300px;
height:50px;
line-height:20px;
position:fixed;
padding-top:10px;
left:-295px;
opacity:.8;
z-index:100;
top:150px;
padding-right:30px;
-moz-border-radius:7px;
color:#FFF;
direction:rtl;
text-align:right;
text-shadow: 0px 1px 2px #000;
-moz-box-shadow: inset 0 0 15px rgba(4, 0, 0, 0.9);
-moz-box-shadow:-0.2em 0.3em 1em rgba(4, 0, 0, 0.9);
background: -moz-linear-gradient(283px 0% 0deg , #005B02, #FF1000 0%);
}
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.text_tooltip')
.hover(function() {
$(this).stop().animate({ left: -20 }, 'fast');
}, function() {
$(this).stop().animate({ left: -295 }, 'fast');
});
});

</script>
</head>
<body>
<div class="text_tooltip" id="text_tooltip" >سلام</div>
</body>
</html>
ramin149
پنج شنبه 12 اسفند 1389, 20:08 عصر
من کد بالا رو به صورت جاوا اسکریپت نوشتم ولی جواب نمی ده کجای کد من اشتباه

function ondiv(sender) {
var w = sender.style.top;
w = w + '10';
sender.style.top = w;
}
tux-world
جمعه 13 اسفند 1389, 01:20 صبح
چرا غذا رو از پشت سرتون میارید جلو می خورید :دی
کد آماده دادم خدمتتون استفاده کنید هر جاش لازمه تغییر بدید
ramin149
یک شنبه 15 اسفند 1389, 14:46 عصر
ببخشید که خیلی مزاحمتون شدم و اسرار داشتم که از جاوا اسکریپت استفاده کنم . ممنون از کدتون
tux-world
یک شنبه 15 اسفند 1389, 15:52 عصر
خواهش میکنم شما ببخشید. ج کیوئری سمپل های فروانی داره که خیلی کارا میشه باهاش کرد. برای همین بهتره یه خورده سمتش برید. شرمنده که تند حرف زدم.ببخشید:خجالت:
ramin149
یک شنبه 15 اسفند 1389, 18:34 عصر
دوست عزیز می دونم ج کیوئری زبان باحالیه چند بار هم امدم یاد بگیرم ولی متاسفانه نتونستم از کجا شروع کنم و مشکل زمان هم داشتم ولی با کد شما حداقل یک برنامه رو بلد شدم خیلی ممنون