ورود

View Full Version : حرکت div با حرکت موس


shadii
جمعه 12 مهر 1392, 23:19 عصر
سلام اگه بخوام با حرکت موس توی صفحه یک div به اندازه 2 پیکسل جابه جا بشه چی کار کنم؟
مثلا با حرکت به راست بره به راست با حرکت موس به چپ بره به چپ
Javidhb
شنبه 13 مهر 1392, 10:53 صبح
آقای jalil_gh (http://barnamenevis.org/member.php?282160-jalil_gh)@ اینجا (http://barnamenevis.org/showthread.php?421937-%D8%A7%D8%B3%DA%A9%D8%B1%D9%88%D9%84-%D8%B4%D8%AF%D9%86-%D8%B5%D9%81%D8%AD%D9%87-%D8%A8%D8%A7-%D9%85%D8%AA%D8%AF-mousemove&p=1888458&viewfull=1#post1888458)توضیح دادن
shadii
شنبه 13 مهر 1392, 20:51 عصر
آخه اونجا تعداد پیکسل ها مهم نیست و من اگه بخوام فقط دو پیکسل حرکت داشته باشه فک نکنم جالب باشه از این کد استفاده کنم : $this.scrollLeft(2);
jalil_gh
یک شنبه 14 مهر 1392, 09:24 صبح
سلام اگه بخوام با حرکت موس توی صفحه یک div به اندازه 2 پیکسل جابه جا بشه چی کار کنم؟
مثلا با حرکت به راست بره به راست با حرکت موس به چپ بره به چپ
شما کدهای html و css مربوطه رو بزارید و دقیقا توضیح بدید که باید چه اتفاقی بافته.
shadii
یک شنبه 14 مهر 1392, 12:07 عصر
هرچی کد زدم اشتباه بود می خوام یک div با حرکت موس به راست دو پیکسل به راست و با حرکت موس به چپ دو پیکسل به چپ حرکت کنه
موس هرجایی تو صفحه می تونه باشه
jalil_gh
یک شنبه 14 مهر 1392, 17:46 عصر
من اینو نوشتم ببینید چطوریه.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#id {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="id"></div>
<script src="lib/jquery.js"></script>
<script>
$(document).ready(function() {
var oldPos;

$(document).mousemove(function(e) {
if (e.pageX > oldPos) {
$('#id').css('left', 98);
} else {
$('#id').css('left', 102);
}

oldPos = e.pageX;
});

});

</script>
</body>
</html>
shadii
دوشنبه 15 مهر 1392, 23:58 عصر
مرسی خیلی خوبه اگه بخوام آروم حرکت کنه چی؟
shadii
سه شنبه 16 مهر 1392, 08:56 صبح
این که نوشتین خوبه ولی برای یه آیتم ،اگه تعداد دیو ها زیاد بشه باید واسه هر کدوم یه دونه اسکریپت بزاریم
صفحه ی اینتل رو ببینید: http://www.intel.com/
همه ی عکس ها با حرکت موس شناورن
jalil_gh
سه شنبه 16 مهر 1392, 13:15 عصر
یه چیزی تو مایه‌های همون سایت اینتل نوشتم ببینید این چطوریه. البته تو این کد همه divها در یک جهت و باهم حرکت میکنن. اگه بخواییم در جهات مختلف و به نسبت‌های مختلف حرکت کنن کد پیچیده‌تر میشه.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#wrapper {
width: 700px;
height: 450px;
background-color: skyblue;
position: relative;
display: block;
margin: 10px auto;
}

.move {
background-color: blue;
position: absolute;
}

#div1 {
width: 100px;
height: 100px;
top: 20px;
left: 20px;
}

#div2 {
width: 300px;
height: 200px;
top: 30px;
left: 300px;
}

#div3 {
width: 150px;
height: 200px;
top: 200px;
left: 50px;
}

#div4 {
width: 200px;
height: 100px;
top: 300px;
left: 450px;
}

</style>
</head>
<body>
<div id="wrapper">
<div id="div1" class="move"></div>
<div id="div2" class="move"></div>
<div id="div3" class="move"></div>
<div id="div4" class="move"></div>
</div>
<script src="lib/jquery.js"></script>
<script>
var oldX,
oldY;
$('#wrapper').mousemove(function(e) {

var movX = (e.pageX - $(this).offset().left) / 2800;
var movY = (e.pageY - $(this).offset().top) / 1200;

if (e.pageX > oldX) {
$('.move').css('left', '-=' + movX);
} else {
$('.move').css('left', '+=' + movX);
}

if (e.pageY > oldY) {
$('.move').css('top', '-=' + movY);
} else {
$('.move').css('top', '+=' + movY);
}

oldX = e.pageX;
oldY = e.pageY;
});
</script>
</body>
</html>