js(JQuery)

実装したい項目から選択

  • .slide_toggle

    ボタンクリック時に特定の要素を表示 / 非表示

    							
    								$(document).on('click','.class-ボタン名',function(){
    									 $('.class_表示したいもの').slideToggle();
    								});
    							
    						
  • resize

    画面幅640px以上の時、画面幅640px以下、470px以上の時、画面幅470px以下の時にそれぞれcssを指定する
    (読み込んだ際、画面幅を変更した際に起動)

    							
    								$(window).on('load resize',function(){
    									 var wh = $(window).width();	
    									 if(wh <= 640 && 470 < wh){
    										  $('.example > div > .bg_grad').css('width', wh - 30 + 'px');
    										  $('.swiper-container_about').css('width', wh - 130 + 'px');
    									 }else if(wh <= 470){
    										  $('.example > div > .bg_grad').css('width', wh - 40 + 'px');
    										  $('.swiper-container_about').css('width', wh - 80 + 'px');
    									 }else{
    										  $('.example > div > .bg_grad').css('width', wh - 40 + 'px');
    										  $('.swiper-container_about').css('width', wh - 140 + 'px');
    									 }
    								});
    							
    						
  • .ready

    サイトを読み込んだら一番heightが大きい要素に高さを合わせる

    							
    								$(document).ready(function(){
    								   var maxHeight = 0;
    									 //もしdivがmaxHeightの値より大きい場合はdivの高さを全部合わせる
    									 $(".class_高さを合わせたい要素").each(function(){
    									     if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    									 });
    									 //divの高さを取得する
    									 $(".class_高さを合わせたい要素").height(maxHeight);
    							  });
    							
    						
  • .prop

    択一チェックボックス ※inputに共通クラスを付与

    							
    								$(function(){
    								   $('.work').on('click', function() {
    								    if ($(this).prop('checked')){
    								           // 一旦全てをクリアして再チェックする
    								           $('.work').prop('checked', false);
    								           $(this).prop('checked', true);
    								    }
    								   });
    								});
    							
    						
  • .html

    指定要素内のhtmlを書き換え(サンプルは画面幅でhtmlを変更)

    							
    								$(function(){
    									 var w = $(window).width();
    								    var x = 640;
    									 if(w <= x){
    									  $('.class_書き換えたい一個親の要素').html('<img src="img/top_sp.png"><header class="top_nav"><a href=""><img src="img/logo_white.png" width="149"></a></header>');
    								   } else {
    								    $('.class_書き換えたい一個親の要素').html('<img src="img/top.png"><header class="top_nav"><a href=""><img src="img/logo_white.png" width="149"></a></header>');
    									 }
    								});
    							
    						
  • .scrollTop

    スクロール位置をデフォルト一番下にする。

    							
    								$(".class_スクロールする要素").scrollTop(100000000);
    							
    						
  • .scroll

    スクロールしてheaderが動いたら.fixedを追加(topに戻ると削除)

    							
    								$(function(){  
    									 var nav    = $('header'),
    									      offset = nav.offset();
    									  
    									 $(window).scroll(function () {
    									    if($(window).scrollTop() > offset.top) {
    									       nav.addClass('fixed');
    									    } else {
    									       nav.removeClass('fixed');
    									    }
    									 }); 
    								});
    							
    						
  • data-scroll

    aタグにdata-scrollを追加するとhref="#〇〇"の位置までスクロールする。(data-offset=数値で停止位置の微調整)

    							
    								  $('a[data-scroll]').on('click', function(e){
    									   e.preventDefault();
    									   var id = $(this).attr('href');
    									   var offset = ($(this).attr('data-offset') != undefined) ? parseInt($(this).attr('data-offset')): 0;
    									   $("html,body").animate({scrollTop:$(id).offset().top + offset}, 1000);
    									});
    							
    						
  • .offset().top

    トップからのスクロール量(h)が指定した数値(200)を上回り、フッターのトップからの距離(f)を下回っている間クラスを付与する。

    							
    								$(window).scroll(function(){
    							     var h = $(window).scrollTop(),
    							          f = $('footer').offset().top;
    							     if(h > 200 && h < f - 1000){
    								      $('main > .fixed').addClass('view');
    							     }else{
    								      $('main > .fixed').removeClass('view');
    							     }
    							  });
    							
    						
  • .delay

    アクション全体を遅らせたい時は一番上に指定。個別で指定したい場合はfunctionの中に指定。

    							
    								// 全体に指定したい場合
    								$('#modal .container > div > *').delay(400).queue(function(next) {
    							     $(this).remove();
    							     $('.class_').addClass('view');
    							     next();
    								});
    								
    								// 単体に指定したい場合
    								$(document).on('click','#modal .container > span',function(){
    									 $('#modal').removeClass('view');
    									 $('body').removeClass('modal_view');
    									 $('#modal .container > div > *').delay(400).queue(function(next) {
    								      $(this).remove();
    								      next();
    									 });
    								});								
    							
    						
  • .delay / for

    画面読み込み後、リストのクラスを順番に削除

    							
    								$(document).ready(function(){
    									for(var i = 0; i < 10; i++){
    										$('aside .face_right li.ready_view').eq(i).delay(1200 + i * 300).queue(function(next){
    										  $(this).removeClass('ready_view');
    										  next();
    										});
    									}	
    								});							
    							
    						
  • swiper.js

    swiper.min.js / swiper.css を読み込み下記のコードで該当するスライダーの設定と機能を調整する。

    															
    						    var swiper = new Swiper('.swiper-container', {
    						       pagination: '.swiper-pagination',
    					         paginationClickable: true,
    					         nextButton: '.swiper-button-next',
    					         prevButton: '.swiper-button-prev',
    					         slidesPerView: 5,
    					         slidesPerGroup: 5,
    					         loop: true,
    					         loopFillGroupWithBlank: true,
    						    });
    						    
    						    ↓下記の記述に変更(上記ではハミ出る + ボタンが動かない)
    						    
    								var w = $(window).width();
    									 $('.swiper-container').width(w);
    								   var swiper = new Swiper('.swiper-container',{
    									    nextButton: '.swiper-button-next',
    									    prevButton: '.swiper-button-prev',
    									    slidesPerView: 1.2,
    									    centeredSlides : true,
    									    slidesPerGroup: 1,
    									    loop: true,
    									
    									    navigation: {
    					               nextEl: '.swiper-button-next',
    					               prevEl: '.swiper-button-prev',
    					            },
    								 });
    														
    						

    便利すぎ!jQuery不要のスライダー「Swiper.js」で色々と遊んでみよう | WordPressテーマ/DigiPress

    引用元URL : https://digipress.digi-state.com/tech/introducing-swiper-js/

    ちょっと機会があって、swiper.js使ったからその時のメモ。本当は単語ごとにスムーススクロールとか設置した方がいいんだろうけど、めんどく( ブラウザの検索機能を使ってくだしあ。ちょくちょく間違ってる可能性があるから、間違ってる箇所があったら教えていただければ気まぐれで修正します。)

  • .animate / .data

    ボタンにdata属性を指定しクリックした際に、ボタンのdata-idと同じ数値のidを持つ要素までスクロールする仕組み

    																						
    								// html
    								<div class="list">
    							     <a data-id="1">1まで飛ばす</a>
    							     <a data-id="2">2まで飛ばす</a>
    							     <a data-id="3">3まで飛ばす</a>
    								</div>
    								
    								<section id="list1">1の飛び先</section>
    								<section id="list2">2の飛び先</section>
    								<section id="list3">3の飛び先</section>
    								
    								// script
    								$(document).on('click','.list a',function(){
    									 for(var  i  =  1;  i  <  50;  i++){
    										  if ($(this).data("id") === i) {
    										    	var a = $('#list' + i).offset().top - 100;   
    									       $('.modal_box').animate({scrollTop: a}, 1000);
    									    }
    									 }	
    								});
    							
    						

Comments

  1. y.kobayashi

    こんなことをjsで解決したい!!などご不明点がございましたら、コメント欄より投稿していただければと思います。

    の返信を表示
  2. y.kobayashi

    Hello Randy.
    Thank you for your comment. I’m sorry but I am not interested in it.
    I will improve the web from now on, so I think that you can continue browsing.
    Yuya

    の返信を表示
  3. レーウィン

    y.kobayashiさん

    はじめましてー!http://reiwinn-web.netで細々と記事を書いてるレーウィンです。
    swiperの箇所にて関連リンクを設置していただき真にありがとうございます。とても嬉しいです!
    1点お願いがありまして、swiperのリンク先を
    https://digipress.digi-state.com/tech/introducing-swiper-js/
    もしくは
    https://www.wan55.co.jp/column/detail/id=588
    もしくは
    http://reiwinn-web.net/2018/03/15/swiper-4-1-6/
    こちらのいずれかに変更していただけないでしょうか?
    といいますのも、swiperはバージョン4以降、オプションの書き方が変更されました。
    例を挙げますと、paginationの書き方は
    pagination: {
      el: ‘.swiper-pagination’,
      clickable: true
    }
    このようになっております。
    最新の情報を多くの方に知っていただきたく、お時間ありましたらご対応いただきたく思ってます。
    よろしくお願いします。

    の返信を表示
    • y.kobayashi

      レーウインさん
      Swiperに関する情報を共有していただきありがとうございます。
      リンク先をhttps://digipress.digi-state.com/tech/introducing-swiper-js/に変更しておきますね!

      – y.kobayashi

      の返信を表示

y.kobayashi にコメントする コメントをキャンセル

内容をご確認の上、送信してください。