https://www.nagasawa-mfg.co.jp/cms/wp-content/themes/nagasawa/assets/products/js/script.js?ver=1.0.2

1// ===================================================================
2// ie判定
3// ===================================================================
4
5$(function(){
6
7  if (browser.ie) $('body').addClass('ie');
8
9})
10
11// ===================================================================
12// lineheight 横3つずつ
13// ===================================================================
14$(function(){
15
16  function lineHeight3Col($obj) {
17
18    var $item = $obj;
19
20    var list = [],
21        len = $item.length,
22        num = 3,
23        times,
24        rest;
25
26        // ループ回数算出
27        times = Math.floor(len / num);
28        // 余り算出
29        rest = len % num;
30
31    // 通常ループ
32    for (var i = 0; i < times; i++) {
33        for (var j = i * num; j < i * num + num; j++) {
34          list.push($item.eq(j));
35        };      
36        heightLine(list);
37        list = [];
38    };
39
40    // 余りループ
41    for (var k = num * times; k < num * times + rest; k++) {
42        list.push($item.eq(k));
43        heightLine(list);
44    };
45
46
47
48  }
49
50  function heightLine(list){
51
52    var h = [],maxH;
53
54    $.each(list, function(i) {
55        h.push($(this).height());
56    });
57
58    // 最大値取得
59    maxH = Math.max.apply(null, h);
60
61    $.each(list, function(i) {
62        $(this).css('height', maxH);
63    });
64
65  }
66  
67  lineHeight3Col($('.lineupBlock__text'));
68  lineHeight3Col($('.lineupBlock__supply'));
69  lineHeight3Col($('.lineupBlock__icon'));
70
71});
72
73
74// ===================================================================
75// imgChange
76// ===================================================================
77$(function(){
78
79      var $slider = $('#slider'),
80          $slides = $slider.find('.mainImg__main img'),
81          $indicator = $slider.find('.item'),
82          $frames = $indicator.find('.bg'),
83          $bg = $slider.find('.mainImg__bg'),
84          slideCnt = $slides.length,
85
86          currentIndex = 0,
87          interval = 7500,
88          timer,
89
90          dur = 900,
91          ease = 'easeOutQuart',
92
93          isAnimation = true;
94
95      // 次のスライドを表示する関数
96      function showNextSlide () {
97
98          if (isAnimation) {
99            isAnimation = false;
100
101            // 次に表示するスライドのインデックス
102            // (もし最後のスライドなら最初に戻る)
103            var nextIndex = (currentIndex + 1) % slideCnt;
104
105            // indicatorのフレーム変更
106            frameChange(nextIndex);
107
108            // 現在のスライドをフェードアウト
109            $slides.eq(currentIndex).fadeOut(dur,ease,function(){isAnimation = true;});
110            // 次のスライドをフェードイン
111            $slides.eq(nextIndex).fadeIn(dur,ease,function(){isAnimation = true;});
112
113            $bg.eq(currentIndex).fadeOut(dur,ease,function(){isAnimation = true;});
114            // 次のスライドをフェードイン
115            $bg.eq(nextIndex).fadeIn(dur,ease,function(){isAnimation = true;});
116
117            // 現在のスライドのインデックスを更新
118            currentIndex = nextIndex;
119
120          }
121
122      }
123
124      function slideChange(){
125
126        if (isAnimation) {
127          isAnimation = false;
128
129          var nextIndex = $(this).index();
130
131          if ($(this).find('.bg').hasClass('on')) {
132            isAnimation = true;
133            return;
134          }
135
136          // indicatorのフレーム変更
137          frameChange(nextIndex);
138
139          // メインビジュアルフェード
140          $slides.eq(currentIndex).fadeOut(dur,ease,function(){isAnimation = true;});
141          $slides.eq(nextIndex).fadeIn(dur,ease,function(){isAnimation = true;});
142
143          $bg.eq(currentIndex).fadeOut(dur,ease,function(){isAnimation = true;});
144          $bg.eq(nextIndex).fadeIn(dur,ease,function(){isAnimation = true;});
145
146          currentIndex = nextIndex;
147
148          stopInterval();
149          startInterval();
150
151        }
152
153      }
154
155      function frameChange(index) {
156        var dur = 0,
157            ease = '';
158
159        $frames
160          .stop().animate({'border-width': 0} ,dur ,function(){
161            $frames
162              .removeClass('on')
163              .eq(index)
164              .addClass('on')
165              .stop().animate({'border-width': '4px'},dur);
166          });
167
168      }
169
170      function startInterval() {
171        timer = setInterval(showNextSlide, interval);
172      }
173
174      function stopInterval() {
175        clearInterval(timer);
176      }
177
178
179      function setEvents() {
180

181        // ready 1番目のスライドをフェードインで表示
182        $slides.eq(currentIndex).fadeIn(dur,ease);
183        $bg.eq(currentIndex).fadeIn(dur,ease);
184        // click
185        $indicator.on('click', slideChange);
186        // interval
187        startInterval();
188
189      }
190
191      setEvents();
192
193});
194
195
196
197// ===================================================================
198// accordion
199// ===================================================================
200$(function(){
201
202  var $container = $('.keywordBlock__wrap'),
203      $title = $container.find('.keywordBlock__tit'),
204      $title_front = $container.find('.keywordBlock__tit_open'),
205      $btnOpen = $container.find('.keywordBlock__btn_detail'),
206      $btnClose = $container.find('.keywordBlock__text'),
207      $imgWrap = $container.find('.keywordBlock__imgWrap'),
208      $img = $imgWrap.find('img'),
209      $shadow = $container.find('.shadow'),
210
211      containerHList = [],
212      imgWrapMargin = [-120,-200,-185],
213      index = 0,
214      len = $('.keywordBlock__wrap').length,
215
216      Open = {},
217      Close = {};
218
219  Open = {
220      title_back:function () {
221        $title.eq(index).css('opacity', '1');
222      },
223      title_front:function () {
224          $title_front.eq(index).css({
225            'opacity': '0',
226            'display': 'none'
227          });
228      },
229      title_front:function () {
230          $title_front.eq(index).css({
231            'opacity': '0',
232            'display': 'none'
233          });
234      },
235      btnOpen:function () {
236          $btnOpen.eq(index).addClass('is-unvisible');
237      },
238      btnClose:function () {
239          $btnClose.eq(index).css('opacity', '1');
240      },
241      imgWrap:function () {
242        var dur = 800,
243            ease = 'easeOutQuart';
244
245          $imgWrap.eq(index).animate({top: 0}, dur, ease);
246      },
247      img:function () {
248        var dur = 800,
249            ease = 'easeOutQuart';
250
251          $img.eq(index).animate({top: 0}, dur, ease);
252      },
253      containerH:function () {
254        var dur = 800,
255            ease = 'easeOutQuart';
256
257          $container.eq(index).animate({height: containerHList[index]}, dur, ease);
258      },
259      shadow:function () {
260        $shadow.eq(index).css({
261          'opacity': '0',
262          'display': 'none'
263        });
264      }
265  }
266
267  Close = {
268      // close処理
269      title_back:function(i) {
270        $title.eq(i).css('opacity', '0');
271      },
272      title_front:function(i) {
273        $title_front.eq(i).css({
274          'opacity': '1',
275          'display': 'block'
276        });
277      },
278      btnOpen:function(i) {
279        $btnOpen.eq(i).removeClass('is-unvisible');
280      },
281      btnClose:function(i) {
282        $btnClose.eq(i).css('opacity', '0');
283      },
284      imgWrap:function(i) {
285        var dur = 800,
286            ease = 'easeOutQuart';
287
288          $imgWrap.eq(i).animate({top: imgWrapMargin[i]}, dur, ease);
289      },
290      img:function(i) {
291        var dur = 800,
292            ease = 'easeOutQuart';
293
294          $img.eq(i).animate({top: -80}, dur, ease);
295      },
296      containerH:function(i) {
297        var dur = 800,
298            ease = 'easeOutQuart';
299
300          $container.eq(i).animate({height: 210}, dur, ease);
301      },
302      shadow:function(i) {
303        var dur = 800,
304            ease = 'easeOutQuart';
305
306        $shadow.eq(i)
307          .css({
308            'display': 'block'
309          })
310          .animate({top: 0, opacity: 1}, dur, ease);
311
312      }
313
314  }
315
316
317  function ready() {
318    $('.keywordBlock__wrap').each(function() {
319      var h = $(this).height();
320
321      containerHList.push(h);
322    });
323  
324    // 閉じる
325    $('.keywordBlock__wrap').css('height', '210px');
326
327  }
328
329  function setObject() {
330
331    index = $('.keywordBlock__btn_detail').index(this);
332
333    setClose();
334    open();
335
336  }
337
338  function open() {
339
340    Open.title_back();
341    Open.title_front();
342    Open.btnOpen();
343    Open.imgWrap();
344    Open.img();
345    Open.containerH();
346    Open.btnClose();
347    Open.shadow();
348
349  }
350
351  function close() {
352
353    for (var i = 0; i < len; i++) {
354
355      Close.title_back(i);
356      Close.title_front(i);
357      Close.btnOpen(i);
358      Close.imgWrap(i);
359      Close.img(i);
360      Close.containerH(i);
361      Close.btnClose(i);
362      Close.shadow(i);
363
364    };
365
366  }
367
368  function setClose() {
369
370    for (var i = 0; i < len; i++) {
371
372      if (i !== index) {
373
374        Close.title_back(i);
375        Close.title_front(i);
376        Close.btnOpen(i);
377        Close.imgWrap(i);
378        Close.img(i);
379        Close.containerH(i);
380        Close.btnClose(i);
381        Close.shadow(i);
382      }
383
384    }
385
386  }
387
388  function setEvents() {
389    // load
390    $(window).on('load', ready);
391
392    // click
393    $btnOpen.on('click', setObject);
394    $btnClose.on('click', close);
395
396  }
397
398  setEvents();
399
400});
401
402
403// ===================================================================
404// 最後の行のitemのmarginを0に
405// ===================================================================
406
407$(function(){
408
409  var $ul = $('.lineupBlock.productBlock'),
410      $li = $ul.find('.item'),
411
412      num = 3,
413      total,
414      rest,
415      start;
416
417      total = $li.length;
418      rest = total % num;
419      if (rest == 0) rest = 3;
420
421      start = total - rest;
422
423  for (var i = start; i < total; i++) {

424    $li.eq(i).css('margin-bottom', '30px');
425  }
426
427});
428
429//--------------------------------------------------
430//
431//  popup
432//
433//--------------------------------------------------
434
435$(function(){
436
437  var $target = $('.lineupBlock__icon .sub_item'),
438
439      text = [
440        '今取り付けてあるドアノブ・円筒錠・錠（ラッチ）・玄関錠から取替・交換ができる製品です。',
441        '閉じ込め防止機能付。異常がおこると、安全側に機能するフェイルセーフ設計を取り入れた製品です。',
442        'レバーの取り付けは差し込み押さえるだけで取付OK。固定ねじ不要で、ガタつきなく、誰でも簡単に固定できます。',
443        'ユニバーサルデザイン仕上げの製品は、お使いいただいてこそわかる使いやすさです。',
444        'キーレックス本体に鍵（キー）がつかないタイプです。キーレックスのスタンダードタイプです。',
445        'キーレックス本体に鍵（キー）がついたタイプです。鍵（キー）操作時は記憶番号を押さずに解錠できます。',
446        'キーレックス本体のボタン操作を不能にし、鍵（キー）操作のみで解錠できる機能です。',
447        'キーレックスで外部、内部の両面がボタン錠のタイプです。別々の番号を記憶させられるので内外ともに施解錠を制限したい場所に最適です。',
448        'キーレックス本体に取り付けできるカバー（別売）です。屋外での使用におすすめです。',
449        'ねじで固定するレバーハンドルです。'
450      ];
451
452  function enter() {
453
454    var num = $(this).find('img').attr('src').slice(-6).slice(0,2);
455        num = Number(num) - 1;
456
457    // text変更
458    var src = '<div class="tip">' +
459                '<div class="text">'+ text[num] +'</div>' +
460                '<span class="triangle"></span>' +
461                '<span class="triangle02"></span>' +
462              '</div>';
463
464    // 追加
465    $(this).append(src);
466
467    // 位置調整
468    adjustPos();
469
470  }
471
472  function leave() {
473
474    $(this).find('.tip').remove();
475
476  }
477
478  function adjustPos() {
479
480    var rightEdge = $('.lineupBlock').offset().left + $('.lineupBlock').width();
481    var rightEdge02 = $('.tip').offset().left + $('.tip .text').width();
482
483    var diff = rightEdge02 - rightEdge;
484
485    if (rightEdge < rightEdge02) $('.tip .text').css('left', '-=' + diff + 'px');
486
487  }
488
489  $target.on('mouseenter', enter);
490  $target.on('mouseleave', leave);
491
492})
493
494
495
496$(function () {
497 　$('.modal_pop').hide();
498 　$('.show_pop').on('click',function(){
499   　$('.modal_pop').fadeIn();
500 　})
501 　$('.js-modal-close').on('click',function(){
502   　$('.modal_pop').fadeOut();
503 　})
504});
505
506(function($) {
507 
508$(function () {
509    var display = function () {
510    if ($(this).scrollTop() > 150) { //scroll量
511            $(".Bnr").fadeIn();
512        } else {
513            $(".Bnr").fadeOut();
514        }
515    };
516    $(window).on("scroll", display);
517    //click
518    $(".Bnr p.close a").click(function(){
519    $(".Bnr").fadeOut();
520    $(window).off("scroll", display);
521    });
522});
523 
524})(jQuery);
525
526
527$(function () {
528	$(".hide").click(function(){
529		$(this).parents(".hide_box_3100").animate({ opacity: "hide" }, "high"); 
530	});
531});
532
533$(function () {
534	$(".hide").click(function(){
535		$(this).parents(".hide_box_4000").animate({ opacity: "hide" }, "high"); 
536	});
537});
538
539$(function () {
540	$(".hide").click(function(){
541		$(this).parents(".hide_box_2100").animate({ opacity: "hide" }, "high"); 
542	});
543});
544
545$(function () {
546	$(".hide").click(function(){
547		$(this).parents(".hide_box_1100").animate({ opacity: "hide" }, "high"); 
548	});
549});
550
551$(function () {
552	$(".hide").click(function(){
553		$(this).parents(".hide_box_800").animate({ opacity: "hide" }, "high"); 
554	});
555});
556
557$(function () {
558	$(".hide").click(function(){
559		$(this).parents(".hide_box_500").animate({ opacity: "hide" }, "high"); 
560	});
561});