A jquery plug-in every day-be a kanban girl 2
Be a Kanban Girl 2
The more you do it, the more ghosts and beasts you are. I don’t want to try this stuff without professional tools. The Kanban girl will stop here. I just want to laugh when I look at it.
The effect is as follows
The added place is the js part
var zgkbn = function() {
var $id = $("body");
$id.addClass("rel");
var $bg = $("<div class='kbnbg'></div>")
var $body = $("<div class='body'></div>");
var $head = $("<div class='heads'><div class='head'></div></div>");
var $leye = $("<div class='leye'></div>");
var $reye = $("<div class='reye'></div>");
$body.appendTo($bg)
$head.appendTo($bg)
$leye.appendTo($head)
$reye.appendTo($head)
$bg.appendTo($id);
return{
$id:$id,
$bg:$bg,
$body:$body,
$head:$head,
$leye:$leye,
$reye:$reye,
head:{
},//头脑中心
leye:{
},//左眼中心
reye:{
},//右眼中心
dz:[-20,-10,0,20,10],
dir:'left',
load:function(dir){
var that = this;
that.dir=dir==undefined?'left':dir;
that.geto();
that.$bg.addClass(dir)
window.onresize = function(){
//保证中心点不出问题
that.geto();
}
that.$id.mousemove(function(e){
//监控鼠标移动
var temp = {
x:e.clientX,y:e.clientY}
that.headc(temp)
that.leyec(temp)
that.reyec(temp)
that.bodyc(temp);
})
},
headc:function(res){
var that =this;
var temp = Math.atan2((res.y-that.head.y),(res.x-that.head.x))/0.017453292;
temp = temp/15;
if(that.dir=="left"){
that.$head.css({
"transform":"rotate("+temp+"deg)"
})
}else{
temp = -temp;
that.$head.css({
"transform":"rotate("+temp+"deg)"
})
}
},
leyec:function(res){
var that =this;
var tempx = res.x>that.leye.x?that.leye.x0+3:that.leye.x0-4;
that.$leye.css("left",tempx);
},
reyec:function(res){
var that =this;
var tempx = res.x>that.reye.x?that.reye.x0+3:that.reye.x0-4;
that.$reye.css("left",tempx);
},
bodyc:function(res){
var that = this;
var temp = res.x>that.head.x?180:0;
that.$body.css({
"transform":"rotateY("+temp+"deg)"
})
},
geto:function(){
var that = this;
var head = that.$head.offset();
var leye = that.$leye.offset();
var reye = that.$reye.offset();
that.head = {
x:head.left+60,y:head.top+65,x0:parseInt(that.$head.css("left").replace("px","")),y0:parseInt(that.$head.css("top").replace("px",""))}
that.leye = {
x:leye.left+5,y:leye.top+9,x0:parseInt(that.$leye.css("left").replace("px","")),y0:parseInt(that.$leye.css("top").replace("px",""))}
that.reye = {
x:reye.left+5,y:reye.top+9,x0:parseInt(that.$reye.css("left").replace("px","")),y0:parseInt(that.$reye.css("top").replace("px",""))}
if(that.dir=='right'){
var w = that.$id.width()-200;
that.head.x = w+that.head.x;
that.leye.x = w+that.leye.x;
that.reye.x = w+that.reye.x;
}
}
}
}
Idea explanation
-
Have n’t I done this kind of calculation to monitor the angle formed by the mouse’s drop point and a certain origin before? I wondered about the portal
so that I could make the paper man’s wife’s head follow it, and then this wave of flying heads let me Laugh out of the pig and call haha
-
The rotation should be reduced later, and then I think the body part of the picture can also be changed, but I can’t change it dynamically, otherwise it’s obviously a horizontal flip effect, so I specifically turned off the animation. Lost
-
Then I modified the previous bug, that is, if you put this signboard girl on the right, there will be a calculation error, you will find that the mouse is placed between the bridge of the nose instead of cross-eyed eyes, because I have misunderstood things before. Miscalculation of the coordinates of the eyes caused the outer eight
-
Then I think it’s the simplest function of the standard configuration of Kanban Girl. I think it’s the simplest function. If I change the picture here, I can use other specialized tools to change the model or something. The dialogue is like a pop-up. The box is the same, but the simplest.
-
It's over, broken sleep~