15 پست در این موضوع قرار دارد

ارسال شده در (ویرایش شده)

سلام و دورود

دوستان من یه اسلایدر ساختم که متاسفانه بخش جی کوئری و کدهای جاوا اسکریپت کار نمیکنه!؟

ممنون

کد جاوا اسکریپت:

$(document).ready(function(){
  $("a:nth-child(1)").css("background-color","white");
  $("#circle1").click(function(){
    $("#slider").animate({'left':'5%'},500);
    $("#data").fadeIn(700);
    $("#data2,#data3,#data4").fadeOut(500);
    $(".line").animate({'left':'60%'});
    $("a:nth-child(1)").css("background-color","white");
    $("a:nth-child(2),a:nth-child(3),a:nth-child(4)").css("background-color","black");
  });
  $("#circle2").click(function(){
    $("#slider").animate({'left':'-30%'},500);
    $("#data2").fadeIn(700);
    $("#data,#data3,#data4").fadeOut(500);
    $(".line").animate({'left':'25%'});
    $("a:nth-child(2)").css("background-color","white");
    $("a:nth-child(1),a:nth-child(3),a:nth-child(4)").css("background-color","black");
  });
  $("#circle3").click(function(){
    $("#slider").animate({'left':'-190%'},500);
    $("#data3").fadeIn(700);
    $("#data,#data2,#data4").fadeOut(500);
    $(".line").animate({'left':'55%'});
    $("a:nth-child(3)").css("background-color","white");
    $("a:nth-child(1),a:nth-child(2),a:nth-child(4)").css("background-color","black");
  });
  $("#circle4").click(function(){
    $("#slider").animate({'left':'-240%'},500);
    $("#data4").fadeIn(700);
    $("#data,#data2,#data3").fadeOut(500);
    $(".line").animate({'left':'25%'});
    $("a:nth-child(4)").css("background-color","white");
    $("a:nth-child(1),a:nth-child(2),a:nth-child(3)").css("background-color","black");
  });
});

 

site_4.zip

ویرایش شده در توسط unid_user
0

به اشتراک گذاری این پست


لینک به پست

سلام و درود @unid_user

 

توی کنسول مرورگر خطایی نشون نمیده؟

0

به اشتراک گذاری این پست


لینک به پست
در 2 دقیقه قبل، mehran-b گفته است :

سلام و درود @unid_user

 

توی کنسول مرورگر خطایی نشون نمیده؟

نه. فایل رو پیوست کردم اگه نیاز هست بررسی میکنید لطفا؟

0

به اشتراک گذاری این پست


لینک به پست
در 20 دقیقه قبل، unid_user گفته است :

سلام و دورود

دوستان من یه اسلایدر ساختم که متاسفانه بخش جی کوئری و کدهای جاوا اسکریپت کار نمیکنه!؟

ممنون

کد جاوا اسکریپت:


$(document).ready(function(){
  $("a:nth-child(1)").css("background-color","white");
  $("#circle1").click(function(){
    $("#slider").animate({'left':'5%'},500);
    $("#data").fadeIn(700);
    $("#data2,#data3,#data4").fadeOut(500);
    $(".line").animate({'left':'60%'});
    $("a:nth-child(1)").css("background-color","white");
    $("a:nth-child(2),a:nth-child(3),a:nth-child(4)").css("background-color","black");
  });
  $("#circle2").click(function(){
    $("#slider").animate({'left':'-30%'},500);
    $("#data2").fadeIn(700);
    $("#data,#data3,#data4").fadeOut(500);
    $(".line").animate({'left':'25%'});
    $("a:nth-child(2)").css("background-color","white");
    $("a:nth-child(1),a:nth-child(3),a:nth-child(4)").css("background-color","black");
  });
  $("#circle3").click(function(){
    $("#slider").animate({'left':'-190%'},500);
    $("#data3").fadeIn(700);
    $("#data,#data2,#data4").fadeOut(500);
    $(".line").animate({'left':'55%'});
    $("a:nth-child(3)").css("background-color","white");
    $("a:nth-child(1),a:nth-child(2),a:nth-child(4)").css("background-color","black");
  });
  $("#circle4").click(function(){
    $("#slider").animate({'left':'-240%'},500);
    $("#data4").fadeIn(700);
    $("#data,#data2,#data3").fadeOut(500);
    $(".line").animate({'left':'25%'});
    $("a:nth-child(4)").css("background-color","white");
    $("a:nth-child(1),a:nth-child(2),a:nth-child(3)").css("background-color","black");
  });
});

 

site_4.zip

وقت بخیر

کد جاواتونو در تگ head صدا کردین؟

0

به اشتراک گذاری این پست


لینک به پست

توی codepen تست میکنم درسته!؟ بنظرتون علتش چی میتونه باشه که توی سیستم خودم نمیاد؟

0

به اشتراک گذاری این پست


لینک به پست
در هم اکنون، miladalizadeh گفته است :

وقت بخیر

کد جاواتونو در تگ head صدا کردین؟

نه بخشی رو توی فایل جدا و بخش هم پیش از تگ بسته body

0

به اشتراک گذاری این پست


لینک به پست
در 7 دقیقه قبل، unid_user گفته است :

نه. فایل رو پیوست کردم اگه نیاز هست بررسی میکنید لطفا؟

شما از ورژن Slim جی کوئری استفاده کردید که بخش AJAX و افکت ها رو نداره.

از ورژن اصلی استفاده کنید.

 

موفق باشید

0

به اشتراک گذاری این پست


لینک به پست
در هم اکنون، mehran-b گفته است :

شما از ورژن Slim جی کوئری استفاده کردید که بخش AJAX و افکت ها رو نداره.

از ورژن اصلی استفاده کنید.

 

موفق باشید

از خود سایت جی کوئری گرفتم همین بود. لینک درستش رو میشه ارسال کنید؟

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

<script>
      var l1=$("#d");
      var l2=$("#a");
      var l3=$("#f");
      var l4=$("#t");

      var layer=$("#main");

      layer.mousemove(function(e) {
        var valuex=(e.pageX * -1 / 40);

        l1.css({'background-position':(valuex-200)+''+0});
        l2.css({'background-position':(valuex)+''+0});
        l3.css({'background-position':(valuex-200)+''+0});
        l4.css({'background-position':(valuex+600)+''+0});
      });
    </script>

حالا فقط بخش آخر مونده. کدهای جاوا اسکریپتی که پیش از تگ body گذاشتم کار نمیکنه. مربوط به mousemove هست. این کدها رو درون تگ head هم گذاشتم تغییری نکرد.

ویرایش شده در توسط unid_user
0

به اشتراک گذاری این پست


لینک به پست
در 9 دقیقه قبل، unid_user گفته است :

حالا فقط بخش آخر مونده. کدهای جاوا اسکریپتی که پیش از تگ body گذاشتم کار نمیکنه. مربوط به mousemove هست. این کدها رو درون تگ head هم گذاشتم تغییری نکرد.

نفهمیدم دقیقا باید چی بشه ولی توی این 4 تا:

l1.css({'background-position':(valuex-200)+''+0});
l2.css({'background-position':(valuex)+''+0});
l3.css({'background-position':(valuex-200)+''+0});
l4.css({'background-position':(valuex+600)+''+0});

background-position واحدش وارد نشده.

0

به اشتراک گذاری این پست


لینک به پست
در هم اکنون، mehran-b گفته است :

نفهمیدم دقیقا باید چی بشه ولی توی این 4 تا:


l1.css({'background-position':(valuex-200)+''+0});
l2.css({'background-position':(valuex)+''+0});
l3.css({'background-position':(valuex-200)+''+0});
l4.css({'background-position':(valuex+600)+''+0});

background-position واحدش وارد نشده.

نباید واحد وارد بشه چون اینها فقط یه عدد هستند برای محاسبات. این برای این هست که وقتی موس رو حرکت میدیم position پس زمینه حرکت کنه.

0

به اشتراک گذاری این پست


لینک به پست
در 10 دقیقه قبل، unid_user گفته است :

نباید واحد وارد بشه چون اینها فقط یه عدد هستند برای محاسبات. این برای این هست که وقتی موس رو حرکت میدیم position پس زمینه حرکت کنه.

وقتی عدد وارد بشه جلوی background-position بدون واحد غیر معتبر میشه.

مثلا

background-position: 50 150;

عبارات بالا کاملا برای CSS بی معنیه چون واحد نداره. باید به شکل زیر باشه:

background-position: 50px 150px;

 

0

به اشتراک گذاری این پست


لینک به پست
در 1 دقیقه قبل، mehran-b گفته است :

وقتی عدد وارد بشه جلوی background-position بدون واحد غیر معتبر میشه.

مثلا


background-position: 50 150;

عبارات بالا کاملا برای CSS بی معنیه چون واحد نداره. باید به شکل زیر باشه:


background-position: 50px 150px;

 

من یه کد دیگه رو امتحان کردم که کار میکنه اما میخوام دقیقا از همون کد قبلی استفاده کنم. این پروژه بر اساس یک ویدئو آموزشی هست و دقیقا همون ترتیب رو رعایت کردم.

کدی که خودم نوشتم و کار میکنه:

$("#d").mousemove(function(event) {
    $("#d").css("background-position","100px");
  });
  $("#d").mouseleave(function(event) {
    $("#d").css("background-position","-200px");
  });

 

0

به اشتراک گذاری این پست


لینک به پست
در 2 دقیقه قبل، unid_user گفته است :

من یه کد دیگه رو امتحان کردم که کار میکنه اما میخوام دقیقا از همون کد قبلی استفاده کنم. این پروژه بر اساس یک ویدئو آموزشی هست و دقیقا همون ترتیب رو رعایت کردم.

خوب کد خودت واحد داره کار میکنه اونا واحد نداره کار نمیکنه.

کدها رو اینطوری کن:

l1.css({'background-position':(valuex-200)+'px '+'0px'});
l2.css({'background-position':(valuex)+'px '+'0px'});
l3.css({'background-position':(valuex-200)+'px '+'0px'});
l4.css({'background-position':(valuex+600)+'px '+'0px'});

 

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط unid_user
      سلام و درود
      دوستان گرامی ، من یک منو دارم که می خوام هر بار که روی یکی از li ها کلیک کردم کلاس active به اون اضافه بشه. ولی روی هرکدوم کلیک میکنم تمام li ها کلاس active رو می گیرن. لطفا راهنمایی کنید.
      این کد رو نوشتم ولی اشتباهه.
      $("ul.icon-div-ul li").click(function() { $("ul.icon-div-ul li").addClass('active'); }); با تشکر و سپاس
    • توسط samen
      سلام دوستان
      اگه امکانش هست لطف کنید تو سایت جی تی متریکس سایت ما رو چک کنید و بفرمایید چه کارهایی دقیقا باید انجام بدیم تا سرعت لود سایت بهبود پیدا کنه؟
      با افزونه های مینی فای و فشرده سازی انجام دادیم اما جواب نداد
      آدرس سایت: https://Mosalman.Net
       
      سؤال بعدی اینه که چطور میشه فایل های جاوا اسکریپت رو ادغام کرد.
      ما 10 تا فایل داریم که عبارتند از:
       
      https://mosalman.net/wp-content/themes/Newspaper/js/tagdiv_theme.min.js?ver=8.8

      https://mosalman.net/wp-includes/js/jquery/jquery.js?ver=1.12.4

      https://www.googletagmanager.com/gtag/js?id=UA-116992895-1

      https://mosalman.net/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1

      http://mosalman.net/wp-content/plugins/a3-lazy-load/assets/js/jquery.lazyloadxt.extra.min.js?ver=1.9.1

      https://mosalman.net/wp-includes/js/wp-embed.min.js?ver=4.9.8

      http://mosalman.net/wp-content/plugins/a3-lazy-load/assets/js/jquery.lazyloadxt.srcset.min.js?ver=1.9.1

      https://mosalman.net/wp-includes/js/comment-reply.min.js?ver=4.9.8

      http://mosalman.net/wp-content/plugins/a3-lazy-load/assets/js/jquery.lazyloadxt.extend.js?ver=1.9.1

      https://mosalman.net/wp-content/plugins/add-to-any/addtoany.min.js?ver=1.1
       
      اگر بخواهیم این کدها رو ادغام و با هم دیگه ترکیب کنیم؛ به ترتیب بفرمائید که کدوم یک را از اول تا آخر باید کپی پیست کنیم در یک فایل.
      باسپاس از پاسخ دوستان
       
       
       
    • توسط unid_user
      سلام و درود
      دوستان گرامی من میخوام با اسکرول کردن background color برای تگ body یا section رو تغییر بدم.
      میخوام از یک متغییر آرایه ای استفاده کنم که به ازای افزایش مقدار متغیر  x در حلقه for هر بار یکی از رنگ ها رو انتخاب کنه و به جای background-color در تگ body یا تگ section قرار بده.
    • توسط unid_user
      سلام و درود
      دوستان گرامی من می خوام در کد زیر مقدار x را افزایش دهم و این مقدار در کد زیر قرار داده شود. 
      #side-bar span:nth-child(" + x + ") کدهای زیر قطعه کد موردنظر به صورت کامل است.
      $(window).scroll(function() { for(var x = 0, x < 6; x++){ if ($(this).scrollTop() > x) { $("#side-bar span:nth-child(" + x + ")").addClass('active'); } } }); ممنون
    • توسط unid_user
      سلام و درود
      دوستان گرامی من یه کد نوشتم که با اسکرول کردن مقدار یکی از property های css رو به صورت خودکار تغییر بدم.اما کد زیر کار نمیکنه. اگه کسی آشنایی داره لطفا من رو راهنمایی کنه.
      با تشکر و سپاس
      let x=0; console.log(x++); if ($(this).scrollTop() > x) { $("div#fixdiv #fiximg").css({'opacity':'1','transform':'translateX(x)'}); } قرار هست که مقدار x در translatX() تغییر کنه.