2月14日哔哩哔哩活动，我们提取了当天bilibili上22娘、33娘的JS动画文件给各位使用。
调用方法：
<script type="text/javascript" src="//static.hdslb.com/js/jquery.min.js"></script> <script type="text/javascript" src="2233.js"></script> <div class="bilibili2233-choose-btn" id="btn_b22" type="22">22娘</div> <div class="bilibili2233-choose-btn" id="btn_b33" type="33">33娘</div> <div class="bilibili2233-choose-btn" id="btn_b33" type="0">隐藏</div>
JS代码如下：
/*(′?ω?｀)情人节是什么，能吃吗？*/
/*
* b2233V.dialog(txt) 可以让2233娘说话哦 (′?ω?｀)
* var fff = b2233V.create(); fff.init(type, pos) 可以继续召唤2233娘哦 (′?ω?｀) // type:"22" || "33", pos:{top:y,left:x}
*/
/** jQuery判断 **/
if (typeof jQuery == 'undefined') {
console.log("哔哩哔哩2233娘动画：缺少必要的jQuery组件，暂时无法使用。");
}else{
console.log("哔哩哔哩2233娘动画：加载成功。");
}
/** 必要函数声明 **/
function __GetCookie(g) {
var f = "" + document.cookie,
j = f.indexOf(g + "=");
if ( - 1 == j || "" == g) {
return ""
}
var h = f.indexOf(";", j); - 1 == h && (h = f.length);
return unescape(f.substring(j + g.length + 1, h))
}
function __SetCookie(f, e) {
var g = new Date;
g.setTime(g.getTime() + 31536000000);
document.cookie = f + "=" + escape(e) + ";expires=" + g.toGMTString() + "; path=/;";
}
function ChatGetSettings(b) {
return "undefined" != typeof localStorage ? localStorage.getItem(b) : __GetCookie(b)
}
function ChatSaveSettings(e, c) {
return "undefined" != typeof localStorage ? localStorage.setItem(e, c) : __SetCookie(e, c)
}
/** 核心代码 **/
/** 如果可能，最好能把2233的gif图存在自己的服务器上，以免bilibili网站升级删除gif **/
(function(d, b) {
function e() {
this.gf = null;
this.characters = {
22: {
motion: {
stand: {
dur: 1230,
src: "http://i0.hdslb.com/u_user/activities/valentine/2015/img/gif/22stand.gif"
},
draw: {
dur: 1E3,
src: "http://i0.hdslb.com/u_user/activities/valentine/2015/img/gif/22draw.gif"
},
hello: {
dur: 1560,
src: "http://i0.hdslb.com/u_user/activities/valentine/2015/img/gif/22hello.gif"
},
sleep: {
dur: 960,
src: "http://i0.hdslb.com/u_user/activities/valentine/2015/img/gif/22sleep.gif"
},
love: {
dur: 1830,
src: "http://i0.hdslb.com/u_user/activities/valentine/2015/img/gif/22love.gif"
}
},
dialog: {
stand: "眨眼",
love: "欧尼酱，daisiki！！",
hello: "大家好，我是22娘",
sleep: "欧尼酱，咕嘿嘿！！",
draw: "画圈"
},
random: ["draw", "hello", "sleep", "love"]
},
33: {
motion: {
stand: {
dur: 1230,
src: "http://i0.hdslb.com/u_user/activities/valentine/2015/img/gif/33stand.gif"
},
draw: {
dur: 1E3,
src: "http://i0.hdslb.com/u_user/activities/valentine/2015/img/gif/33draw.gif"
},
hello: {
dur: 1330,
src: "http://i0.hdslb.com/u_user/activities/valentine/2015/img/gif/33hello.gif"
},
sleep: {
dur: 900,
src: "http://i0.hdslb.com/u_user/activities/valentine/2015/img/gif/33sleep.gif"
},
love: {
dur: 1830,
src: "http://i0.hdslb.com/u_user/activities/valentine/2015/img/gif/33love.gif"
}
},
dialog: {
stand: "眨眼",
love: "喵帕斯！！",
sleep: "睡觉了！",
hello: "空尼七哇。",
draw: "好无聊啊"
},
random: ["draw", "hello", "sleep", "love"]
}
};
this.dialogTimer = this.standTimer = this.timer = null;
this.moving = 0;
this.bound = !1;
b('<style type="text/css">.b2233-click{transform-origin: 50% 100%;animation: b2233-click 0.5s linear;-webkit-transform-origin: 50% 100%;-webkit-animation: b2233-click 0.5s linear;}@keyframes b2233-click{0%{transform:scale(1,1);}10%{transform:scale(1.1,0.95);}30%{transform:scale(1,1);}}@-webkit-keyframes b2233-click{0%{-webkit-transform:scale(1,1);}10%{-webkit-transform:scale(1.1,0.9);}30%{-webkit-transform:scale(1,1);}}</style>').appendTo("head")
}
e.prototype = {
create: function() {
return new e
},
init: function(a, f) {
var c = this;
if (a && this.characters[a]) {
this.gf = {
elem: b("<div>").css({
position: "fixed",
width: 150,
height: 150,
bottom: 50,
right: 30,
cursor: "pointer",
zIndex: 10050
}),
img: b("<img />").css({
display: "block",
width: "100%",
height: "100%"
}),
assets: null
};
void 0 !== f && this.gf.elem.css(f);
this.gf.elem.append(this.gf.img).appendTo("body");
this.gf.elem.on("click", function() {
var bq=["draw","hello","sleep","love"];
var rans=Math.floor(Math.random()*4);
1 >= c.moving && (c.stop(), c.change(bq[rans]), c.dialog(bq[rans]), c.start());//change:动作 dialog:说话
//1 >= c.moving && (c.stop(), c.change("sleep"), c.dialog("sleep"), c.start());
c.moving = 0
});
var g = this.gf.elem;
this.gf.elem.on("mousedown.b2233", function(a) {
a.preventDefault();
var f = a.pageX - b(this).offset().left,
e = a.pageY - b(this).offset().top;
b(document).on("mousemove.b2233", function(a) {
c.moving++;
a.preventDefault();
var h = a.clientX - f,
k = a.clientY - e,
k = k >= b(d).height() - g.height() - 5 && c.bound ? b(d).height() - g.height() - 5 : 0 >= k && c.bound ? 0 : a.clientY - e,
h = h >= b(d).width() - g.width() - 5 && c.bound ? b(d).width() - g.width() - 5 : 0 >= h && c.bound ? 0 : a.clientX - f;
g.css({
right: "auto",
bottom: "auto",
left: h,
top: k
})
});
b(document).on("mouseup.b2233", function(a) {
1 < c.moving && (c.gf.elem.removeClass("b2233-click"), setTimeout(function() {
c.gf.elem.addClass("b2233-click")
}, 0));
b(document).off("mousemove.b2233");
b(document).off("mouseup.b2233")
})
});
this.setTarget(a);
this.start();
return this.gf
}
},
start: function() {
this.stand();
this.random()
},
stop: function() {
clearTimeout(this.standTimer);
clearTimeout(this.timer)
},
stand: function(a) {
var b = this;
clearTimeout(this.standTimer);
this.standTimer = setTimeout(function() {
b.change("stand");
b.stand()
}, a || 3E3)
},
random: function() {
var a = this,
b = 1E3 * Math.round(5 * Math.random() + 5);
clearTimeout(this.timer);
this.timer = setTimeout(function() {
clearTimeout(a.standTimer);
var b = a.gf.assets.random,
b = b[Math.round(Math.random() * (b.length - 1))];
a.change(b);
a.stand(2E3);
a.random()
}, b)
},
change: function(a) {
this.gf.img.attr("src", this.gf.assets.motion[a].src)
},
setTarget: function(a) {
this.stop();
this.gf.assets = this.characters[a || "22"];
this.change("stand");
this.start()
},
dialog: function(a) {
var d = this;
a = this.gf.assets.dialog[a] || a;
clearTimeout(this.dialogTimer);
this.closeDialog(0);
var c = b("<div>").html(a).attr({
style: "transition:0.3s",
dialog: "true"
}).css({
position: "absolute",
top: -20,
left: -100,
visibility: "hidden",
opacity: 0,
backgroundColor: "#d32d5b",
color: "#fff",
padding: "5px 10px",
fontSize: "13px",
width: 130,
wordWrap: "break-word",
zIndex: 10050
}).appendTo(this.gf.elem);
setTimeout(function() {
c.css({
visibility: "visible",
opacity: 1
});
d.dialogTimer = setTimeout(function() {
d.closeDialog()
}, 2E3)
}, 0)
},
closeDialog: function(a) {
this.gf.elem.find("[dialog]").stop(!0, !0).fadeOut("undefined" == typeof a ? 200 : a, function() {
b(this).remove()
})
}
};
b(function() {
"undefined" == typeof d.b2233V && ((d.b2233V = new e).init(ChatGetSettings("valentine_2233")), b("#btn_b22,#btn_b33").off("click"), b("#btn_b22,#btn_b33").on("click", function() {
var a = b(this).attr("type");
ChatSaveSettings("valentine_2233", a);
/* 判断 如果是隐藏指令则刷新页面 */
if (a=="0"){window.location.href=window.location;}
"undefined" != typeof d.b2233V && (d.b2233V.gf ? d.b2233V.setTarget(a) : d.b2233V.init(a))
}))
})
})(window, jQuery);
/* 默认设置 */
if (!ChatGetSettings("valentine_2233")){
console.log("哔哩哔哩2233娘动画：设置文件不存在，默认设置33娘。");
ChatSaveSettings("valentine_2233", "33");/* 如果希望默认关闭请设置为0或者删除本行 */
}else{
console.log("哔哩哔哩2233娘动画：设置文件存在，加载的设置文件为"+ChatGetSettings("valentine_2233")+"娘。0娘代表已关闭。");
}
JS文件及图包下载:bilibili 2233娘动画.zip
按照惯例送上歌曲，来自小缘的爱言叶。资源方：bilibili