PDA

View Full Version : اسکرول شدن صفحه با متد mousemove


shadii
چهارشنبه 10 مهر 1392, 08:07 صبح
سلام
من یه کد دارم که توی اینترنت اکسپلورر کار نمی کنه:
کسی می تونه بگه چرا و چیکار کنم که کار کنه؟
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
var viewportRight = $(window).width();
var documentRight = $(document).width();

//Lets listen for mousemove event on body tag
$('.m').mousemove(function (e) {
//Get current y position
var X = e.pageX - $(this).scrollLeft();

//Based on current proportion, update the document's scrollTop.
$(this).scrollLeft((X / viewportRight) * documentRight);
});


// $('body').mousemove(function (e) {
// var y = e.pageX - this.offsetLeft;
// var x = e.pageY - this.offsetTop;
// $('.m').css({ 'top': x , 'left': y });
// });
});
</script>



<div class=".m" style="width: 1583px">

kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkk&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
gggg&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
gggggggggg<br />
f<br />
<br />
b<br />
nb<br />
mn<br />
n<br />
<br />
<br />
<div class="m" style="width: 466px; background-color: #CC00FF">gg</div>
<br />
n<br />
<br />
n<br />
<br />
<br />
<br />
n<br />
<br />
<br />
n<br />
n</div>
jalil_gh
چهارشنبه 10 مهر 1392, 19:37 عصر
اول اینکه شما فقط یه دونه جی‌کوئری به صفحه‌ات باید اضافه کنه. دوتا اضافه کردی این ممکنه باعث اختلال بشه.
دوما این که این کد دقیقا باید چکار کنه؟؟؟
من این کدها رو نوشتم که با mousemove به چپ و راست اسکرول میشه. شاید منظورتون این باشه.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
width: 2000px;
height: 2000px;
margin:0; padding: 0;
background-color: skyblue;
}
</style>
</head>
<body>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {

$(document).mousemove(function (e) {
var $this = $(this);
var X = e.pageX - $this.scrollLeft();
$this.scrollLeft(X);

});
});
</script>
</body>
</html>
shadii
جمعه 12 مهر 1392, 23:16 عصر
یه دنیا ممنون ازت همینو می خواستم
shadii
جمعه 12 مهر 1392, 23:16 عصر
جیکوئری رو چه جوری یادگرفتی؟
merlin425
شنبه 13 مهر 1392, 00:18 صبح
از اینجا (http://www.p30sazan.com/) فیلم های jQuery رو ببین کامل نیست ولی اشنا میشی چیز کاملی زیاد پیدا نمیشه بیشتر تجربیه

اقای jalili_gh راهنمایی کردن لطف کردن ولی واسه تشکر کردن از دکمه "تشکر کردن" که گوشه پایین هر پست هست استفاده کن اگه این جوری باشه که تمام سایت باید با پست های تشکر پر میشد

دو تا فایلی که اول به صفحه لینک کرده بودی هر دوش یکیه منتها یکیشون توش کلمه min داره که نشون میده فشرده شدست که بهش میگن minify که فضاهای خالی از توش حذف شده و باعث میشه سری تر load بشه شما همیشه از jquery-min استفاده کن
jalil_gh
شنبه 13 مهر 1392, 17:34 عصر
دوستان اون کدی که بالا قرار دادم کار میکنه ولی زیاد جالب نیست. اونو آپدیت کردم. الان هم به صورت افقی و هم به صورت عمودی با حرکت موس اسکرول میشه.
فکر کنم با این روش و تکنیک پارالکس بشه سایت‌های جالبی طراحی کرد.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
margin:0; padding: 0;
overflow: hidden;
}
td {
padding: 100px;
font-size: 2em;
background-color: skyblue;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
<td>36</td>
<td>37</td>
<td>38</td>
<td>39</td>
<td>40</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
<td>46</td>
<td>47</td>
<td>48</td>
<td>49</td>
<td>50</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td>53</td>
<td>54</td>
<td>55</td>
<td>56</td>
<td>57</td>
<td>58</td>
<td>59</td>
<td>60</td>
</tr>
<tr>
<td>71</td>
<td>72</td>
<td>73</td>
<td>74</td>
<td>75</td>
<td>76</td>
<td>77</td>
<td>78</td>
<td>79</td>
<td>80</td>
</tr>
<tr>
<td>81</td>
<td>82</td>
<td>83</td>
<td>84</td>
<td>85</td>
<td>86</td>
<td>87</td>
<td>88</td>
<td>89</td>
<td>90</td>
</tr>
<tr>
<td>91</td>
<td>92</td>
<td>93</td>
<td>94</td>
<td>95</td>
<td>96</td>
<td>97</td>
<td>98</td>
<td>99</td>
<td>100</td>
</tr>
</table>
<script src="lib/jquery.js"></script>
<script>
$(document).ready(function () {
var $doc = $(document),
$win = $(window),

docWidth = $doc.width(),
winWidth = $win.width(),
diffWidth = docWidth - winWidth,

docHeight = $doc.height(),
winHeight = $win.height(),
diffHeight = docHeight - winHeight;

$(document).mousemove(function (e) {
$doc.scrollLeft(e.pageX / docWidth * diffWidth)
.scrollTop(e.pageY / docHeight * diffHeight);
});
});
</script>
</body>
</html>
imangame
دوشنبه 18 آذر 1398, 12:36 عصر
درود خدمت دوستان یه سوال داشتم بنده همچین کدی نوشتم روی هر جای صفحه کلیک میکنم div من باهاش حرکت میکنه حالا همین کار رو میخوام زمانی که کلیک چپ موس رو گرفتم بتونم با حرکت دستم حرکتش بدم .
window.addEventListener('click', function(e) {
var square = document.getElementById('square');
square.style.left = e.offsetX;
square.style.top = e.offsetY;

var windowWidth = document.body.clientWidth;
var windowHeight = document.body.clientHeight;

if(e.offsetX + 150 > windowWidth) {
square.style.left = windowWidth - 150;
}
if(e.offsetY + 150 > windowHeight){
square.style.top = windowHeight - 150;
}

});
ASHKANLAEI
دوشنبه 18 آذر 1398, 14:37 عصر
کار میکنه؟window.addEventListener('move', function(e) {if (e.buttons != 1) return;
var square = document.getElementById('square');
square.style.left = e.offsetX;
square.style.top = e.offsetY;


var windowWidth = document.body.clientWidth;
var windowHeight = document.body.clientHeight;


if(e.offsetX + 150 > windowWidth) {
square.style.left = windowWidth - 150;
}
if(e.offsetY + 150 > windowHeight){
square.style.top = windowHeight - 150;
}




});
imangame
سه شنبه 19 آذر 1398, 11:30 صبح
[QUOTE=ASHKANLAEI;2425356]کار میکنه؟[JAVASCRIPT]window.addEventListener('move', function(e) {if (e.buttons != 1) return;
var square = document.getElementById('square');
square.style.left = e.offsetX;
square.style.top = e.offsetY;
خیر کار نمیکنه

از سایت های خارجی چیزایی پیدا کردم ولی نمیدونم چرا استفاده میکنم کار نمیکنه
$(document).ready(function(){
$('#test').on('mousedown',function(e){
$this = $(this);
$(document).bind('mousemove',function(e){
var left = e.pageX -($this.width()/2);
var top = e.pageY -($this.height()/2);
$('#test').css({
'left': left +'px',
'top': top +'px'
});
});
});
$(window).on('mouseup',function(e){
$(document).unbind('mousemove');
});
});

لینک سایت

https://stackoverflow.com/questions/32013194/move-a-div-horizontally-with-mouse-using-jquery