اسکرول شدن صفحه با متد 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;&nb  sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp  ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&  nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb  sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp  ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&  nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb  sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp  ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&  nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb  sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

        gggg&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs  p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n  bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs  p;&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 به چپ و راست اسکرول میشه. شاید منظورتون این باشه.

کد HTML:

<!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 صبح

از اینجا فیلم های jQuery رو ببین کامل نیست ولی اشنا میشی چیز کاملی زیاد پیدا نمیشه بیشتر تجربیه

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

دو تا فایلی که اول به صفحه لینک کرده بودی هر دوش یکیه منتها یکیشون توش کلمه min داره که نشون میده فشرده شدست که بهش میگن minify که فضاهای خالی از توش حذف شده و باعث میشه سری تر load بشه شما همیشه از jquery-min استفاده کن

**jalil_gh** · شنبه 13 مهر 1392, 17:34 عصر

دوستان اون کدی که بالا قرار دادم کار میکنه ولی زیاد جالب نیست. اونو آپدیت کردم. الان هم به صورت افقی و هم به صورت عمودی با حرکت موس اسکرول میشه.
فکر کنم با این روش و تکنیک پارالکس بشه سایت‌های جالبی طراحی کرد.

کد HTML:

<!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/...e-using-jquery

نام تاپیک: اسکرول شدن صفحه با متد mousemove

ابزار های تاپیک

نمایش

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

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

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

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

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

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

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

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

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

تاپیک های مشابه

سوال: اسکرول شدن صفحه اینترو ؟

لود شدن تصاویر پس از اسکرول خوردن صفحه

حرفه ای: load شدن صفحه هنگام اسکرول کردن کاربر (مانند Google Image)

بهم ریخته شدن صفحه ( ظاهر شدن اسکرول )

قوانین ایجاد تاپیک در تالار