/** * jQueryオブジェクトの拡張 * * @date 2015-01-08 */ (function(window, document, $, undefined) { /** * userAgent判定フラグ * * @date 2014-09-03 */ var ua = navigator.userAgent.toLowerCase(); $.ua = { // Windows isWindows: /windows/.test(ua), // Mac isMac: /macintosh/.test(ua), // IE isIE: /msie (\d+)|trident/.test(ua), // IE6 isIE6: /msie (\d+)/.test(ua) && RegExp.$1 == 6, // IE7 isIE7: /msie (\d+)/.test(ua) && RegExp.$1 == 7, // IE8未満 isLtIE8: /msie (\d+)/.test(ua) && RegExp.$1 < 8, // IE9未満 isLtIE9: /msie (\d+)/.test(ua) && RegExp.$1 < 9, // IE10未満 isLtIE10: /msie (\d+)/.test(ua) && RegExp.$1 < 10, // Firefox isFirefox: /firefox/.test(ua), // WebKit isWebKit: /applewebkit/.test(ua), // Chrome isChrome: /chrome/.test(ua), // Safari isSafari: /safari/.test(ua)&&(!/chrome/.test(ua))&&(!/mobile/.test(ua)), // タッチデバイス isTouchDevice: 'ontouchstart' in window, // iOS isIOS: /i(phone|pod|pad)/.test(ua), // iPhone、iPod touch isIPhone: /i(phone|pod)/.test(ua), // iPad isIPad: /ipad/.test(ua), // iPhone4 isIPhone4: (/i(phone|pod)/.test(ua)&&window.devicePixelRatio == 2), // iPad3 isIPad3: (/ipad/.test(ua)&&window.devicePixelRatio == 2), // Android isAndroid: /android/.test(ua), // モバイル版Android isAndroidMobile: /android(.+)?mobile/.test(ua) }; /** * ロールオーバー * * @date 2012-10-01 * * @example $('.rollover').rollover(); * @example $('.rollover').rollover({ over: '-ov' }); * @example $('.rollover').rollover({ current: '_cr', currentOver: '_cr_ov' }); * @example $('.rollover').rollover({ down: '_click' }); */ $.fn.rollover = function(options) { var defaults = { over: '_ov', current: null, currentOver: null, down: null }; var settings = $.extend({}, defaults, options); var over = settings.over; var current = settings.current; var currentOver = settings.currentOver; var down = settings.down; return this.each(function() { var src = this.src; var ext = /\.(gif|jpe?g|png)(\?.*)?/.exec(src)[0]; var isCurrent = current && new RegExp(current + ext).test(src); if (isCurrent && !currentOver) return; var search = (isCurrent && currentOver) ? current + ext : ext; var replace = (isCurrent && currentOver) ? currentOver + ext : over + ext; var overSrc = src.replace(search, replace); new Image().src = overSrc; $(this).mouseout(function() { this.src = src; }).mouseover(function() { this.src = overSrc; }); if (down) { var downSrc = src.replace(search, down + ext); new Image().src = downSrc; $(this).mousedown(function() { this.src = downSrc; }); } }); }; /** * フェードロールオーバー * * @date 2012-11-21 * * @example $('.faderollover').fadeRollover(); * @example $('.faderollover').fadeRollover({ over: '-ov' }); * @example $('.faderollover').fadeRollover({ current: '_cr', currentOver: '_cr_ov' }); */ $.fn.fadeRollover = function(options) { var defaults = { over: '_ov', current: null, currentOver: null }; var settings = $.extend({}, defaults, options); var over = settings.over; var current = settings.current; var currentOver = settings.currentOver; return this.each(function() { var src = this.src; var ext = /\.(gif|jpe?g|png)(\?.*)?/.exec(src)[0]; var isCurrent = current && new RegExp(current + ext).test(src); if (isCurrent && !currentOver) return; var search = (isCurrent && currentOver) ? current + ext : ext; var replace = (isCurrent && currentOver) ? currentOver + ext : over + ext; var overSrc = src.replace(search, replace); new Image().src = overSrc; $(this).parent() .css('display','block') .css('width',$(this).attr('width')) .css('height',$(this).attr('height')) .css('background','url("'+overSrc+'") no-repeat'); $(this).parent().hover(function() { $(this).find('img').stop().animate({opacity: 0}, 200); }, function() { $(this).find('img').stop().animate({opacity: 1}, 200); }); }); }; /** * 不透明度ロールオーバー * * @date 2014-09-03 * * @example $('.opacity').opacityRollover(); * @example $('.opacity').opacityRollover({ overOpacity: 0.6 }); * @example $('.opacity').opacityRollover({ fade: false }); */ $.fn.opacityRollover = function(options) { var defaults = { fade: true, defaultOpacity: 1, overOpacity: 0.7, inDuration: 250, outDuration: 200, easing: 'easeOutQuart' }; var settings = $.extend({}, defaults, options); var fade = settings.fade; var defaultOpacity = settings.defaultOpacity; var overOpacity = settings.overOpacity; var inDuration = settings.inDuration; var outDuration = settings.outDuration; var easing = settings.easing; return this.each(function() { $(this).hover(function() { if (fade) { $(this).stop().animate({opacity: overOpacity}, inDuration, easing); } else { $(this).css({opacity: overOpacity}); } }, function() { if (fade) { $(this).stop().animate({opacity: defaultOpacity}, outDuration, easing); } else { $(this).css({opacity: defaultOpacity}); } }); }); }; /** * スムーズスクロール * * @date 2014-12-01 * * @example $.scroller(); * @example $.scroller({ hashMarkEnabled: true }); * @example $.scroller({ scopeSelector: '#container', noScrollSelector: '.no-scroll' }); * @example $.scroller('#content'); * @example $.scroller('#content', { pitch: 20, delay: 5, marginTop: 200, callback: function(){} }); */ $.scroller = function() { var self = $.scroller.prototype; if (!arguments[0] || typeof arguments[0] == 'object') { self.init.apply(self, arguments); } else { self.scroll.apply(self, arguments); } }; // プロトタイプにメンバを定義 $.scroller.prototype = { // 初期設定 defaults: { hashMarkEnabled: false, scopeSelector: 'body', noScrollSelector: '.noscroll', pitch: 10, delay: 10, marginTop: 0, callback: function() {} }, // 初期化 init: function(options) { var self = this; var settings = this.settings = $.extend({}, this.defaults, options); $(settings.scopeSelector).find('a[href^="#"]').not(settings.noScrollSelector).each(function() { var hash = this.hash || '#'; var eventName = 'click.scroller'; $(this).off(eventName).on(eventName, function(e) { e.preventDefault(); this.blur(); self.scroll(hash, settings); }); }); }, // スクロールを実行 scroll: function(id, options) { if (this.timer) this.clearScroll(); var settings = (options) ? $.extend({}, this.defaults, options) : (this.settings) ? this.settings : this.defaults; if (!settings.hashMarkEnabled && id == '#') return; var self = this; var win = window; var $win = $(win); var d = document; var pitch = settings.pitch; var delay = settings.delay; var scrollLeft = $win.scrollLeft(); if (($.ua.isIPhone || $.ua.isAndroidMobile) && win.pageYOffset === 0) win.scrollTo(scrollLeft, (($.ua.isAndroidMobile) ? 1 : 0)); var scrollEnd = (id == '#') ? 0 : $(id + ', a[name="' + id.substr(1) + '"]').eq(0).offset().top; var windowHeight = ($.ua.isAndroidMobile) ? Math.ceil(win.innerWidth / win.outerWidth * win.outerHeight) : win.innerHeight || d.documentElement.clientHeight; var scrollableEnd = $(d).height() - windowHeight; if (scrollableEnd < 0) scrollableEnd = 0; scrollEnd = scrollEnd - settings.marginTop; if (scrollEnd > scrollableEnd) scrollEnd = scrollableEnd; if (scrollEnd < 0) scrollEnd = 0; scrollEnd = Math.floor(scrollEnd); if ($.ua.isAndroid && scrollEnd === 0) scrollEnd = 1; var dir = (scrollEnd > $win.scrollTop()) ? 1 : -1; (function _scroll() { var prev = self.prev; var current = self.current || $win.scrollTop(); if (current == scrollEnd || typeof prev == 'number' && (dir > 0 && current < prev || dir < 0 && current > prev)) { self.clearScroll(); settings.callback(); return; } var next = current + (scrollEnd - current) / pitch + dir; if (dir > 0 && next > scrollEnd || dir < 0 && next < scrollEnd) next = scrollEnd; win.scrollTo(scrollLeft, next); self.prev = current; self.current = next; self.timer = setTimeout(function() { _scroll(); }, delay); })(); }, // スクロールを解除 clearScroll: function() { clearTimeout(this.timer); this.timer = null; this.prev = null; this.current = null; } }; /** * orientationchangeに関するイベントハンドラ登録用メソッド * * @date 2011-05-30 * * @example $(window).orientationchange(function() { alert(window.orientation); }); * @example $(window).portrait(function() { alert(window.orientation); }); * @example $(window).landscape(function() { alert(window.orientation); }); */ var type = ($.ua.isAndroid) ? 'resize' : 'orientationchange'; $.fn.extend({ // オリエンテーションチェンジ orientationchange: function(fn) { return this.bind(type, fn); }, // ポートレイト portrait: function(fn) { return this.bind(type, function() { if (window.orientation === 0) fn(); }); }, // ランドスケープ landscape: function(fn) { return this.bind(type, function() { if (window.orientation !== 0) fn(); }); } }); /** * script要素のsrc属性を利用して指定したファイル名のルートにあたるパスを取得 * * @date 2011-06-20 * * @example $.getScriptRoot('common/js/base.js'); */ $.getScriptRoot = function(filename) { var elms = document.getElementsByTagName('script'); for (var i = elms.length - 1; i >= 0; i--) { var src = elms[i].src; if (new RegExp('(.*)?' + filename + '([\?].*)?').test(src)) return RegExp.$1; } return false; }; /** * script要素のsrc属性からオブジェクトに変換したクエリを取得 * * @date 2011-06-20 * * @example $.getScriptQuery(); * @example $.getScriptQuery('common/js/base.js'); */ $.getScriptQuery = function(filename) { var elms = document.getElementsByTagName('script'); if (!filename) { return $.getQuery(elms[elms.length - 1].src); } else { for (var i = elms.length - 1; i >= 0; i--) { var src = elms[i].src; if (new RegExp(filename).test(src)) return $.getQuery(src); } return false; } }; /** * 文字列からオブジェクトに変換したクエリを取得 * * @date 2011-05-30 * * @example $.getQuery(); * @example $.getQuery('a=foo&b=bar&c=foobar'); */ $.getQuery = function(str) { if (!str) str = location.search; str = str.replace(/^.*?\?/, ''); var query = {}; var temp = str.split(/&/); for (var i = 0, l = temp.length; i < l; i++) { var param = temp[i].split(/=/); query[param[0]] = decodeURIComponent(param[1]); } return query; }; /** * 画像をプリロード * * @date 2012-09-12 * * @example $.preLoadImages('/img/01.jpg'); */ var cache = []; $.preLoadImages = function() { var args_len = arguments.length; for (var i = args_len; i--;) { var cacheImage = document.createElement('img'); cacheImage.src = arguments[i]; cache.push(cacheImage); } }; /** * スクロール時に要素を遅延表示 * * @date 2015-01-08 * * @example $('img').scrollDisplay(); * @example $('img').scrollDisplay({duration: 2000, posFix: 200}); * @example $('img').scrollDisplay({beforeFadeIn: function() {...}, afterFadeIn: function() {...}}); */ $.fn.scrollDisplay = function(options) { var defaults = { duration: 1000, easing: 'easeInOutQuart', posFix: 100, beforeFadeIn: function() {}, afterFadeIn: function() {} }; var settings = $.extend({}, defaults, options); return this.each(function() { var win = window; var _this = this; var obj = $(this); var length = obj.length; var pos = []; var func = { init: function() { obj.not('.faded').css({opacity: 0}); for (var i = 0; i < length; i++) { var posY = obj.eq(i).offset().top; pos.push(posY); } func.scroll(); }, scroll: function() { var scrollTop = $(win).scrollTop(); var windowBottom = $(win).height() + scrollTop - settings.posFix; for (var i = 0; i < obj.length; i++) { if (pos[i] <= windowBottom) { func.fadeIn(i); } } }, fadeIn: function(i) { if (!obj.eq(i).hasClass('faded')) { settings.beforeFadeIn.call(_this); obj.eq(i).animate({opacity: 1}, settings.duration, settings.easing, function() { settings.afterFadeIn.call(_this); }).addClass('faded'); } } }; func.init(); $(win).on('scroll', function() { func.scroll(); }); }); }; /** * 高さ揃え * * @date 2014-08-27 * * @example $('#itemList').heightAlign(); * @example $('#itemList').heightAlign({target: 'li'}); * @example $('#itemList').heightAlign({target: 'li', base: 'ul'}); ※各