ورود

View Full Version : راهنمایی در مورد عملکرد نمونه کد های جی کوئری


eletcomp
پنج شنبه 24 اردیبهشت 1394, 19:43 عصر
با سلام
میخواستم بدونم این 2 قطعه کد دقیقا چه عملی را انجام میدهند!! لطفا مختصرا توضیح بدهید!!





================================================== ===============================
1.

var scrollPosition = $(window).scrollTop();
$('#stars').css('top', (0 - (scrollPosition * .2)) + 'px');
$('#images').css('top', (0 - (scrollPosition * .5)) + 'px');
================================================== ===============================
2.
$('a.saturn').click(function() {
$('html, body').animate({ scrollTop:$('#saturn').offset().top }, 1000,
function() {
func();
});
return false;
});
================================================== ===============================







سپاس
alireza_s_84
پنج شنبه 24 اردیبهشت 1394, 21:40 عصر
var scrollPosition = $(window).scrollTop();
یک متغیر تعریف کرده و توی اون مقدار اسکرول شده سند از بالای پنجره رو قرار داده.

$('#stars').css('top', (0 - (scrollPosition * .2)) + 'px');
به خاصیت top یک المنت با id=stars اومده متغیر قبلی رو با عبارت درون پرانتز مقدار داده.

$('#images').css('top', (0 - (scrollPosition * .5)) + 'px');
اینم اومده به خاصیت top المنتی با id=images مقدار درون پرانتز رو داده.

قسمت دوم هم میگه هروقت هر عنصر a که خاصیت class اون برابر saturn بود کلیک شد صفحه رو با انیمیشن به میزان top المنتی با id=stars اسکرول کن که مدت زمان اجرای این اسکرول 1000 میلی ثانیه یا یک ثانیه باشه.
eletcomp
پنج شنبه 24 اردیبهشت 1394, 22:22 عصر
ممنون دوست عزیز: کد اولی را زیاد متوجه نشدم ولی کد 2 را تقریبا متوجه شدم!!
لطفا اگه می توانید یکم کامل تر توضیح بدهید! این کد برای پارالکس هست!!! و پیچیده هست یکم!

$('#stars').css('top', (0 - (scrollPosition * .2)) + 'px');
$('#images').css('top', (0 - (scrollPosition * .5)) + 'px');


سپاس
fahimeh65
پنج شنبه 07 خرداد 1394, 10:11 صبح
سلام میشه بگید اشکال این کد چیه؟من میخوام این دیو وقتی صفحه لود میشه به سمت راست حرکت کنه:اشتباه:

<head runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("Button").click(function () {
$(1).animate({ right: '250px' });
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="1" style="width: 30px; height: 70px; background-color: #000000"></div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
</body>

</html>