https://www.yufuin-santokan.com/common/js/home.js

1/**
2 * メイン処理。
3 */
4$(function(){
5
6	var timer = false;
7	$(window).resize(function(){
8		if (timer !== false) clearTimeout(timer);
9		timer = setTimeout(function(){
10			
11			var r = (document.all ? document.body.clientWidth : window.innerWidth);
12			//if (isTablet() || r <= 768) {
13			if (r <= 768) {
14				//$('#slides>ul>li').css('width','90%');
15				var h = r*348/950;
16				$('#slides').css('background-color','#C9B0A9');
17				$('#slides').css('height',h.toString() + 'px');
18				$('#slides>ul').css('height',h.toString() + 'px');
19				$('#slides>ul>li').css('height',h.toString() + 'px');
20				$('#slides>ul>li>a').css('height',h.toString() + 'px');
21				
22				$('.slide_bar').css('position','absolute');
23				$('.slide_photo').css('position','absolute');
24				$('#slides>ul>li>a').css('position','absolute');
25				
26				$('.slide_bar').css('top','0');
27				$('.slide_photo').css('top','0');
28				$('#slides>ul>li>a').css('top','0');
29				
30				$('#slides>ul>li').css('width','90%');
31				$('.slide_bar').css('width','5.5%');
32				$('.slide_photo').css('width','100%');
33				$('#slides>ul>li>a').css('width','94.5%');
34				$('.slide_photo').css('left','0');
35				$('#slides>ul>li>a').css('left','5.5%');
36				
37				$('.slide_bar').css('height',h.toString() + 'px');
38				$('.slide_photo').css('height',h.toString() + 'px');
39				
40				$('#no1').css('left','0');
41				$('#no2').css('left','90%');
42				$('#no3').css('left','95%');
43				
44				$('#no1>a').show();
45				$('#no2>a').hide();
46				$('#no3>a').hide();
47				
48				$('#no1').hover(function(){
49					$('#no1>a').show();
50					$('#no2').stop().animate({left:'90%'}, duration, easing, function(){$('#no2>a').hide();$('#no3>a').hide();});
51					$('#no3').stop().animate({left:'95%'}, duration, easing);
52				});
53				$('#no2').hover(function(){
54					$('#no2>a').show();
55					$('#no2').stop().animate({left:'5%'}, duration, easing, function(){$('#no1>a').hide();$('#no3>a').hide();});
56					$('#no3').stop().animate({left:'95%'}, duration, easing);
57				});
58				$('#no3').hover(function(){
59					$('#no3>a').show();
60					$('#no2').stop().animate({left:'5%'}, duration, easing, function(){$('#no1>a').hide();$('#no2>a').hide();});
61					$('#no3').stop().animate({left:'10%'}, duration, easing);
62				});
63
64			} else {
65				var duration = 500;
66				var easing = ['linear','swing'];
67				easing = easing[1];
68				
69					$('#slides').css('height','348px');
70					$('#slides>ul>li').css('height','348px');
71					
72					$('.slide_bar').css('position','relative');
73					$('#slides>ul>li>a').css('position','absolute');
74					$('.slide_bar').css('top','0');
75					$('#slides>ul>li>a').css('top','0');
76					$('#slides>ul>li>a').css('left','50px');
77					$('.slide_bar').css('width','50px');
78					$('.slide_photo').css('width','800px');
79					$('#slides>ul>li>a').css('width','800px');
80					$('.slide_bar').css('height','348px');
81					$('.slide_photo').css('height','348px');
82					$('#slides>ul>li>a').css('height','348px');
83					
84					$('#no1>a').show();
85					$('#no2>a').show();
86					$('#no3>a').show();
87					$('#no1').css('left','0');
88					$('#no2').css('left','850px');
89					$('#no3').css('left','900px');
90					
91				$('#no1').hover(function(){
92					$('#no2').stop().animate({left:'850px'}, duration, easing);
93					$('#no3').stop().animate({left:'900px'}, duration, easing);
94				});
95				$('#no2').hover(function(){
96					$('#no2').stop().animate({left:'50px'}, duration, easing);
97					$('#no3').stop().animate({left:'900px'}, duration, easing);
98				});
99				$('#no3').hover(function(){
100					$('#no2').stop().animate({left:'50px'}, duration, easing);
101					$('#no3').stop().animate({left:'100px'}, duration, easing);
102				});
103			}
104		},200);
105	}).resize();
106});
107