NEKOHAND

泪水即为青春的钻石, 为你装点出光彩

Nekohand > 探索 > Lovelive左下角挂架(Js学习)

Lovelive左下角挂架(Js学习)

2015-4-9 / 611

左下角萌萌的搜索栏添加完毕~

这个挂架是别的网站copy的, 原作者Kazy

主函数

/**
* Created by kazy on 2014/05/29.
*/

/**
* メインメソッド
*/

$(window).load(function() {
$ = jQuery.noConflict();
var KEY = {
LAST_ACCESS_MUSIC: 'lastAccessMusic',
MY_MEMBER_NAME: 'myMemberName',
UID: "uid",
SEARCH_WORD_HISTORY: "searchWordHistory",
VERSION: "version"
};

var KEYCODE = {
ENTER: '13'
};

var STATUS = {
IS_SEARCH_EXIST : 'isSearchExist',
IS_SEARCH_SUCCESS : 'isSearchSuccess',
NAVI_MEMBER_IMG_LIST : 'navi-member-img-list',
NAVI_MEMBER_BTN_YES : 'navi_member_btn_yes',
FUKIDASHI_TIMER_ID : 'fukidashiTimerId',
INTERVAL_ID : 'intervalId'
};

var myMember = {
name : '',
talks: [],
image: {},
change : function(name){
this.name = name;
this.talks = MembersConst.getTalks(name);
this.image = MembersConst.getImageConf(name);
},
changeRandom: function(){
var me = this;
var memberNames = MembersConst.getNames();
var randomName = memberNames[Math.floor(Math.random() * memberNames.length)];
me.change(randomName);
}
};
var memberNames = MembersConst.getNames();

var localStorage = {
/* ローカルストレージに登録する */
regist : function(key, value){
if (window.localStorage.setItem != undefined) {
window.localStorage.setItem(key, value);
}
},
/* ローカルストレージから取得する */
get : function(key){
return (window.localStorage.getItem != undefined) ? window.localStorage.getItem(key) : null;
}
};

/* function毎のアニメーション状態を一括して保持しておく変数 */
var clickStatus = (function clickStatus(){
var keys = {};
return {
start: function(key){ keys[key] = true;},
end: function(key){ keys[key] = false;},
isExecute: function(key){ return keys[key] != undefined ? keys[key] : false;}
};
})();

var comStatus = (function commonStatus(){
var keys = {};
return {
get: function(key){ return keys[key]},
set: function(key, val){ keys[key] = val},
is: function(key){ return keys[key] == true;}
};
})();

/* 初期化処理 */
function init() {

var myMemberName;
if (localStorage.get(KEY.MY_MEMBER_NAME) != null) {
myMember.change(localStorage.get(KEY.MY_MEMBER_NAME));
} else {
// テキトーなキャラをナビゲーターに
myMember.changeRandom();
}
registUID();

createMemberImageList();
refreshNavigator(myMemberName);
}

init();

/**
* 直タイトル選択
*/
$("h2").click(function () {
// 最後に開いた曲をLocalStorageに登録
var locationId = "#" + $(this).next(".music-box").children("p:first-child").attr("id");

localStorage.regist(KEY.LAST_ACCESS_MUSIC, locationId);
$(this).next(".music-box").toggle();
location.href = locationId;
});

/**
* 目次タイトル選択
*/
$("#outline").children("a").click(function () {
var locationId = $(this).attr("href");
if ($(locationId).parent(".music-box").css("display") == "none") {
$(locationId).parent().prev().click();
}
location.href = locationId;
if ($('#search_delete_btn').css('opacity') >= '0.8') {
comStatus.set(STATUS.IS_SEARCH_SUCCESS, true);
makeFukidashi(putTalkRandom(myMember.talks.search.success), 4000);
}
return false;
});

$(function () {
var topBtn = $('#go_outline');
var topBtnAnchor = $('#go_outline').children('a');
var topBtnImg = $('#go_outline').children('img');
topBtn.hide();
topBtnImg.hide();

//スクロールが500に達したらボタン表示
$(window).scroll(function () {
$ = jQuery.noConflict();
if ($(this).scrollTop() > 400) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
topBtnAnchor.hide();
topBtnImg.fadeIn("fast");
$('body,html').not(":animated").animate({
scrollTop: 0
}, 700, function () {
topBtnImg.fadeOut("slow", function () {
topBtn.hide();
topBtnAnchor.show();
});

});
return false;
});
});

/**
* 検索処理
**/
$("#search_btn").click(function () {
buttonSwing('#search_btn');
//$( "#searchform" ).submit();
// $("input#s.box").val('eddie32');
// alert($("#searchform").innerHTML);
comStatus.set(STATUS.IS_SEARCH_SUCCESS, false);
// 全て表示状態に戻す
$('#outline').children('a').show();
var wdOrg = $("#search_word_input").val();
//var wdOrg = $("#s.box").val();
var talks = myMember.talks.search;
// 検索ワード登録
registSearchWordHistory(wdOrg);
var wd = wdOrg.toLowerCase();
wd = jQuery.trim(wd); // 前後の空白除去
// alert(wd);
var locc = 'https://blog.nekohand.moe/?s='+wd;
// alert(locc);
window.location = locc;
if (wd == "") {
makeFukidashi(putTalkRandom(talks.space), 4000);
return false;
}
var hitList = "";
for (var key in searchWord) {
if (searchWord.hasOwnProperty(key) && searchWord[key].indexOf(wd) != -1) {
comStatus.set(STATUS.IS_SEARCH_EXIST, true);
hitList += key + ",";
}
}
if (comStatus.is(STATUS.IS_SEARCH_EXIST)) {
// 初期化
comStatus.set(STATUS.IS_SEARCH_EXIST, false);
var outlineLen = $('#outline').children('a').length;
hitList = hitList.slice(0, hitList.length - 1).split(',').sort(function (a, b) {
return parseInt(a) - parseInt(b);
});
hitListLen = hitList.length;

// 検索結果反映(違うものを隠す)
// for (var i = 0, j = 0; i <= outlineLen && j < hitListLen; i++) { // if (i < hitList[j]) { // $('#outline').children("a[href=#music-" + i + "]").hide(); // } else { // j = j + 1; // } // } // $('#outline').children('a[href=#music-' + (i - 1) + ']').nextAll().hide(); $('#search_delete_btn').css('opacity', '1'); //$('#s.box').val(''); //$('#search_word_input').val(''); $('#go_outline').click(); // 検索語が自キャラ名 if (MembersConst.isCallMe(myMember.name, wd)) { makeFukidashi(putTalkRandom(talks.name), 5000); } else { makeFukidashi(putTalkRandom(talks.now), 5000); } //$("#s.box").submit(); } else { $('#search_word_input').val(''); // $('#search_word_input').val(''); if (MembersConst.isCallMe(myMember.name, wd)) { makeFukidashi(putTalkRandom(talks.name), 5000); } else { makeFukidashi(putTalkRandom(talks.resultZero), 5000); } //$("#s.box").submit(); } }); /** * 一覧を元に戻すボタン */ $('#search_delete_btn').click(function () { if ($(this).css('opacity') <= '0.8') { buttonSwing('#search_delete_btn'); $('#search_word_input').val(''); return false; } var talks = myMember.talks.search; buttonSwing('#search_delete_btn'); $('#outline').children('a').show(); setTimeout(function () { $('#search_delete_btn').css('opacity', '0.2'); }, 650); $('#go_outline').click(); if (!comStatus.is(STATUS.IS_SEARCH_SUCCESS)) { makeFukidashi(putTalkRandom(talks.failed), 4000); } }); /** * 検索ワード入力欄のバインド */ //$('#search_word_input').focus(function () { $('#search_word_input').focus(function () { var talks = myMember.talks.search; if(comStatus.get(STATUS.INTERVAL_ID) != undefined){ clearInterval(comStatus.get(STATUS.INTERVAL_ID)); } makeFukidashi(putTalkRandom(talks.focus), 4000); var intervalId = setInterval(function () { makeFukidashi(putTalkRandom(talks.wait), 4000); }, 6000); comStatus.set(STATUS.INTERVAL_ID, intervalId) }).keypress(function (e) { if (e.which == KEYCODE.ENTER) { $('#search_btn').click(); $(this).blur(); } }).blur(function () { clearInterval(comStatus.get(STATUS.INTERVAL_ID)); }); /* $('#s.box').focus(function () { var talks = myMember.talks.search; if(comStatus.get(STATUS.INTERVAL_ID) != undefined){ clearInterval(comStatus.get(STATUS.INTERVAL_ID)); } makeFukidashi(putTalkRandom(talks.focus), 4000); var intervalId = setInterval(function () { makeFukidashi(putTalkRandom(talks.wait), 4000); }, 6000); comStatus.set(STATUS.INTERVAL_ID, intervalId) }).keypress(function (e) { if (e.which == KEYCODE.ENTER) { $('#search_btn').click(); $(this).blur(); } }).blur(function () { clearInterval(comStatus.get(STATUS.INTERVAL_ID)); });*/ /** * 初期化処理 最後に見ていた曲を優先的に開く **/ $(function () { var ls = localStorage.get(KEY.LAST_ACCESS_MUSIC); if (ls != null) { $("#outline").children("a[href=" + ls + "]").click(); } }); /** * 検索キャラクター表示ボタン **/ $('#show_chara_btn').click(function () { // 表示されているナビゲーターがあれば消す if($('#navi_contents_wrapper > div').is(':visible')){
var visibleWrapper = ($("#navi_contents_wrapper > div:visible").attr('id')).match(/^(.+)_wrapper/)[1];
$('#' + visibleWrapper).click();
}
buttonSwing('#show_chara_btn');
$(this).animate({bottom: '1000px', opacity: '0.8'}, 800, 'easeInBack', function () {
$('#search').show().animate({bottom: '0'}, 700);
$(this).hide();
});
});

/**
* キャラクター隠すボタン
**/
$('#hide_chara_btn').click(function () {
buttonSwing('#hide_chara_btn');
$('#search').animate({bottom: '-200px'}, 500, 'easeInQuad', function () {
$('#search').hide();
});
// さがすボタンを落とす
$('#show_chara_btn').show().animate({bottom: '0', opacity: '1'}, 1500, 'easeOutBounce');
});

/**
* ボタンをスイングさせる
**/
function buttonSwing(target) {
$(target).addClass('swing');
setTimeout(function () {
$(target).removeClass('swing')
}
, 560);
}

/**
* 吹き出し作る関数
*/
function makeFukidashi(comment, timeOut) {
if ($('#search_comment').css('display') != 'none') {
$('#fukidashi').hide();
$('#fukidashi').html(comment).show('fast');
}
$('#search_comment').not(':animated').show('fast', function () {
$('#fukidashi').html(comment);
// 実行キューに何か入っていたら消す
if (comStatus.get(STATUS.FUKIDASHI_TIMER_ID) != undefined) {
clearTimeout(comStatus.get(STATUS.FUKIDASHI_TIMER_ID));
}
var timerId = setTimeout(function () {
$('#fukidashi').html('');
$('#search_comment').not(':animated').hide('fast');
comStatus.set(STATUS.FUKIDASHI_TIMER_ID, undefined);
}, timeOut);
comStatus.set(STATUS.FUKIDASHI_TIMER_ID, timerId);
});
}

/**
* トーク配列の中から一つランダムで選ぶ
* @param talk
* @returns {*}
*/
function putTalkRandom(talk) {
return talk[Math.floor(Math.random() * talk.length)];
}

/**
* UIDを取得する。存在しなければ作成してLocalStorageに登録する
*/
function registUID() {
var uid = localStorage.get(KEY.UID);
if (uid == null) {
// 0 ~ 10000000の間でテキトーなUIDを作成する(この間で重複したら仕方ない)
uid = Math.floor(Math.random() * 10000000);
localStorage.regist(KEY.UID, uid);
}
}

/**
* 検索ワードをヒストリに登録する
* @param word 検索ワード
*/
function registSearchWordHistory(word) {
var history = localStorage.get(KEY.SEARCH_WORD_HISTORY);
localStorage.regist(KEY.SEARCH_WORD_HISTORY, history + ',\n' + word);
}

/**
* AWS初期化処理
*/
function awsInit() {
// versionCheck用User
AWS.config.update({accessKeyId: 'AKIAJGXJQIFIH2IMZTVA', secretAccessKey: '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'});
var s3BucketName = 'oreore-call';
var s3RegionName = 'us-west-2';
var s3Dir = 'version';
var s3Param = {region: s3RegionName, maxRetries: 0};
var s3ListObjectParam = {Bucket: s3BucketName, Prefix: s3Dir};
var s3 = new AWS.S3(s3Param);

s3.listObjects(s3ListObjectParam, function (error, data) {
if (error) {

} else {
var nextVersion = data.Contents[1].Key.split('/')[1];
var currentVersion = localStorage.get(KEY.VERSION);
if (nextVersion != currentVersion) {
// リロードを促す
showReloadMessage();
//localStorage.regist(KEY.VERSION, verFileName);
}

}
})
}

/**
* ナビゲータをクリックした時の処理
*/
$('#navi_bar > ul > li').click(function () {
if(this.id == 'navi_settings'){
return;
} else if(this.id == 'navi_news') {
onClickNaviNewsOpen();
}
var searchBottom = parseInt($('#search').css('bottom'));
if( searchBottom >= 0){
$('#hide_chara_btn').click();
}
var target = '#' + this.id + '_wrapper';
// クリックしたナビゲーション以外を閉じる
$('#navi_contents_wrapper > div').not(':animated').not(target).hide();
// クリックしたナビゲーションだけをトグルする
$(target).not(':animated').slideToggle(function(){
toggleNaviMemberNotSelected();
});
});

/***
* ナビゲータのキャンセルボタンを押した時の処理
*/
$('#navi_btn_no').click(function () {
// もはや全て隠す
// :TODO 対象だけをゆっくり隠す
$('#navi_contents_wrapper > div').hide();
});

var prevPos = Infinity;
/**
* ナビゲーションの表示・非表示
*/
$(window).on('scroll', function () {
var naviWrapper = $('#navi_wrapper');
var currentY = $(window).scrollTop() != undefined ? $(window).scrollTop() : this.scrollY;
if (currentY < 50 || currentY > prevPos + 100) {
// 消える
naviWrapper.not(':animated').fadeOut('fast');
prevPos = currentY;
} else if(currentY < prevPos - 50 && currentY > 150) {
// 出る
naviWrapper.not(':animated').fadeIn('fast');
prevPos = currentY;
}
});

/**
* メンバーセレクト画面のイメージリストを作成する
*/
function createMemberImageList(){
var memberList = '';
var MEMBER_SPRITE_IMG = '../static/images/widget/splite_face_icons.jpg';
for(var idx in memberNames){
memberList +=
'

';
}
// LIST完成
//alert(memberList);
$ = jQuery.noConflict();
memberList = $('

').append(memberList);
$('#member_img_wrapper').append(memberList);

}

/**
* メンバーセレクト画面で非選択状態に戻す処理
*/
function toggleNaviMemberNotSelected(){
if($('#navi_member_big_img_wrapper').not(':animated')){
$('#navi_selected_img_wrapper').hide();
$('#navi_member_btn_wrapper').hide();
$('#navi_message_member').html('');
$('#member_img_wrapper > ul').fadeIn();
}
}

/**
* メンバーセレクト画面で選択状態にする処理
*/
function toggleNaviMemberSelected(index, statusKey) {

var selectedMember = MembersConst.getMemberFromIndex(index);
var bigPos = selectedMember.image.bigPos;

var $selectedImg = $($('.navi-member-img-list')[index]);
var $notSelectedImg = $('.navi-member-img-list').not($selectedImg);
var borderOrg = $selectedImg.css('border');
var marginLeftOrg = $selectedImg.css('marginLeft');
var marginLeft = marginLeftOrg - 7;
var marginTopOrg = $selectedImg.css('marginTop');
var marginTop = marginTopOrg - 7;

$notSelectedImg.css('visibility', 'hidden');
$selectedImg.css({border: 'white 7px solid', marginLeft:'8px', marginTop:'8px'});
setTimeout(function(){
// 少しずつ非表示にする
$('#member_img_wrapper > ul').not(':animated').fadeOut(800, function(){
$selectedImg.css({border: borderOrg, marginLeft: marginLeftOrg, marginTop: marginTopOrg});
$notSelectedImg.css('visibility', 'visible');
$('#navi_member_big_img_wrapper > img').css({'top': bigPos[0] + 'px', 'left': bigPos[1] + 'px'});
$('#navi_selected_img_wrapper').show();
$('#navi_member_btn_wrapper').show();
// ここはその時に選択したメンバーが使われる
var mes = MembersConst.getProfileFromIndex(index);
$('#navi_message_member').html(mes);
clickStatus.end(statusKey);
});
}, 500);
}

/**
* メンバーセレクト画面でメンバーをクリックした際の処理
*/
var selectMemberIndex = 0;
$('.navi-member-img-list').click(function(){
var statusKey = STATUS.NAVI_MEMBER_IMG_LIST;
if(clickStatus.isExecute(statusKey)){
return;
}
clickStatus.start(statusKey);
selectMemberIndex = $(this).index();
toggleNaviMemberSelected(selectMemberIndex, statusKey);
});

/**
* メンバーセレクト画面の決定ボタンを押した時の処理
*/
$('#navi_member_btn_yes').click(function(){
var statusKey = STATUS.NAVI_MEMBER_BTN_YES;
if(clickStatus.isExecute(statusKey)){
return;
}
clickStatus.start(statusKey);
var selectMemberName = memberNames[selectMemberIndex];
localStorage.regist(KEY.MY_MEMBER_NAME, selectMemberName);
myMember.change(selectMemberName);
refreshNavigator();
//TODO なんか動作入れたい
$navMesMember = $('#navi_message_member');
$('#navi_member_btn_wrapper').slideToggle();
$navMesMember.fadeOut(function(){
$navMesMember.html(myMember.talks.partnerSelect.decide);
$navMesMember.fadeIn(function() {
setTimeout(function () {
$('#navi_member_select_wrapper').fadeOut(function () {
toggleNaviMemberNotSelected();
$('#navi_member_btn_wrapper').slideToggle();
clickStatus.end(statusKey);
});
}, 5000);
});
});

});

/**
* ナビゲーター変数をリフレッシュする処理
*/
function refreshNavigator(name){
var top = myMember.image.searchCharaPos[0];
var left = myMember.image.searchCharaPos[1];
$('#search_chara_img').css({top: top + 'px', left: left + 'px'});
}

/**
* メンバーセレクト画面のキャンセルボタンを押した時の処理
*/
$('#navi_member_btn_no').click(function(){
toggleNaviMemberNotSelected();
});

/**
* ナビゲーション:ニュースを開いた時の処理
*/
function onClickNaviNewsOpen() {
if ($('#navi_news_wrapper').css('display') != 'none'){
return;
}
var top = myMember.image.newsCharaPos[0];
var rand = Math.floor(Math.random() * -9) * 96;
var left = rand;
$('#navi_news_character_img').css({top: top + 'px', left: left + 'px'});
}
/**
* ニュース画面のリロードを押した時の処理
*/
$('#navi_news_btn_yes').click(function(){
location.reload(true);
});

/**
* ニュース画面のあとでを押した時の処理
*/
$('#navi_news_btn_no').click(function(){
$('#navi_news').click();
});

});

上一篇 下一篇

在本页面下面有 2 条评论

添加评论