اسکرول شدن صفحه با متد mousemove
سلام
من یه کد دارم که توی اینترنت اکسپلورر کار نمی کنه:
کسی می تونه بگه چرا و چیکار کنم که کار کنه؟
<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 &nb sp;   ; & nbsp; &nb sp;   ; & nbsp; &nb sp;   ; & nbsp; &nb sp;
gggg &nbs p; &n bsp; &nbs p;
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>
نقل قول: اسکرول شدن صفحه با متد mousemove
اول اینکه شما فقط یه دونه جیکوئری به صفحه‌ات باید اضافه کنه. دوتا اضافه کردی این ممکنه باعث اختلال بشه.
دوما این که این کد دقیقا باید چکار کنه؟؟؟
من این کدها رو نوشتم که با 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>
نقل قول: اسکرول شدن صفحه با متد mousemove
یه دنیا ممنون ازت همینو می خواستم
نقل قول: اسکرول شدن صفحه با متد mousemove
جیکوئری رو چه جوری یادگرفتی؟
نقل قول: اسکرول شدن صفحه با متد mousemove
از اینجا فیلم های jQuery رو ببین کامل نیست ولی اشنا میشی چیز کاملی زیاد پیدا نمیشه بیشتر تجربیه
اقای jalili_gh راهنمایی کردن لطف کردن ولی واسه تشکر کردن از دکمه "تشکر کردن" که گوشه پایین هر پست هست استفاده کن اگه این جوری باشه که تمام سایت باید با پست های تشکر پر میشد
دو تا فایلی که اول به صفحه لینک کرده بودی هر دوش یکیه منتها یکیشون توش کلمه min داره که نشون میده فشرده شدست که بهش میگن minify که فضاهای خالی از توش حذف شده و باعث میشه سری تر load بشه شما همیشه از jquery-min استفاده کن
نقل قول: اسکرول شدن صفحه با متد mousemove
دوستان اون کدی که بالا قرار دادم کار میکنه ولی زیاد جالب نیست. اونو آپدیت کردم. الان هم به صورت افقی و هم به صورت عمودی با حرکت موس اسکرول میشه.
فکر کنم با این روش و تکنیک پارالکس بشه سایت‌های جالبی طراحی کرد.
کد 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>
نقل قول: اسکرول شدن صفحه با متد mousemove
درود خدمت دوستان یه سوال داشتم بنده همچین کدی نوشتم روی هر جای صفحه کلیک میکنم 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;
}
});
نقل قول: اسکرول شدن صفحه با متد mousemove
کار میکنه؟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;
}
});
نقل قول: اسکرول شدن صفحه با متد mousemove
[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
