با عرض سلام و خسته نباشید خدمت دوستان و سروران گرامی
سوالی داشتم در خصوص مختصات در jqery
فرض کنید ما یک تگ div داریم و با کمک css به آن پهنا و ارتفاع میدهیم و حال میخواهیم کاربر هر کجای صفحه که کلیک کرد اون div ما نیز حرکت کنه...
با تشکر
Printable View
با عرض سلام و خسته نباشید خدمت دوستان و سروران گرامی
سوالی داشتم در خصوص مختصات در jqery
فرض کنید ما یک تگ div داریم و با کمک css به آن پهنا و ارتفاع میدهیم و حال میخواهیم کاربر هر کجای صفحه که کلیک کرد اون div ما نیز حرکت کنه...
با تشکر
این میشه؟
$("#divid").ofset(left: mouseX, top: mouseY);
ممنون ولی کدهای زیر هم میشه امتحان کردم جواب داد.نقل قول:
نوشته شده توسط ASHKANLAEI
window.addEventListener('click', function(event) {
var x = event.clientX
var y = event.clientY
var position = document.getElementById('main');
position.style.top = y + 'px';
position.style.left = x + 'px';
})
//$(document).click(function(event){
// console.log($(document).width())
// var x = event.clientX;
// var y = event.clientY;
// $('#main').css({
// top: y + 'px',
// left: x + 'px'
// })
//});
//
سوال دومم در این خصوص اینه که چه جوری مختصات رو محاسبه کنیم که وقتی کلیک میکنیم روی گوشه های صفحه جسم ما نیم تنه نیفته در صفحه و کامل در صفحه بمونه...
یک شرط قرار بدین که اگر مختصات ماوس + اندازه div تون بیشتر از اندازه صفحه بود div رو بجای ماوس به بیشترین مختصاتی ببره که بیرون از صفحه نمیفته.
بله میدونم بنده یکم در موضوع شرط ها ضعیف هستم برای همین نمیتونم شرط خوبی بنوسیمنقل قول:
نوشته شده توسط ASHKANLAEI
مثلا اندازه width و height من 150px
شرط رو چه جوری بنویسم؟
مثلا سایز صفحت 500*500 هستش و سایز دیو متحرک هم 100*100 (عدد رند میدم که ساده بشه محاسبه )
حالا طرف کلیک کرد باید پیکسل اون کلیک کمتر از 400 باشه اگه بیشتر از 400 بود از باکس میفته بیرون
مثلا ارتفاع رو در نظر میگیریم شما اگه رو نقطه 450px صفحه کلیک کنی و top دیو رو برابر با اون نقطه قرار بدی از اونجایی که 100px ارتفاع دیو هستش مکان دیو میشه از نقطه 450px تا نقطه 550px و از اونجایی که صفحه ما کلا 500px ارتفاع داره این مقداریش میفته بیرون صفحه
به عبارت دیگه میگی که اگه y نقطه کلیک شده بیش از 400px بود ... همون 400px رو در نظر بگیر براش
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JSKing</title>
<style>
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background: red;
position: absolute;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="circle"></div>
<script>
var main = function () {
var circle = document.querySelector(".circle");
document.body.addEventListener("click", function(event) {
bw = document.body.clientWidth;
bh = document.body.clientHeight;
w = circle.clientWidth;
h = circle.clientHeight;
circle.clientLeft = event.clientX + 'px';
circle.clientTop = event.clientY + 'px';
if (event.clientX + w > bw) {circle.clientLeft = bw - w + 'px';}
if (event.clientY + h > bh) {circle.clientTop = bh - h + 'px';}
});
}
main();
</script>
</body>
</html>
توی پاسخم از jquery استفاده نکردم.