每天一个jquery插件-做个看板娘1
做个看板娘1
人家的看板娘真的漂亮,但是看到别人用的live2d做的我又没时间去看接口,所以先按照自己想的东西瞎搞先,等到以后周末有空就去研究研究,当然我现在的看板娘压根没有3d模型,今天就让她眼珠子先动起来先。
效果如下
代码部分
html,body.rel{
width: 100%;
height: 100%;
}
.kbnbg{
width: 200px;
height: 300px;
position: fixed;
bottom: 0;
}
.kbnbg *{
transition: all 0.2s linear;
}
.kbnbg.left{
left: 0;
}
.kbnbg.right{
right: 0;
}
.kbnbg .body{
background-image: url(../img/body.png);
height: 200px;
width: 150px;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: absolute;
bottom: 0;
left: 25px;
z-index: 2;
}
.kbnbg .heads{
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
height: 130px;
width: 120px;
top: 0;
left: 40px;
z-index: 3;
position: absolute;
}
.kbnbg .head{
background-image: url(../img/head.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
height: 130px;
width: 120px;
z-index: 3;
position: absolute;
left: 0;
}
.kbnbg .leye{
background-image: url(../img/leye.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
width: 10px;
height: 18px;
position: absolute;
left: 42px;
top: 55px;
z-index: 1;
}
.kbnbg .reye{
background-image: url(../img/reye.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
width: 10px;
height: 18px;
position: absolute;
left: 82px;
top: 58px;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>做个看板娘</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/zgkbn.js"></script>
<link href="css/zgkbn.css" rel="stylesheet" type="text/css" />
<style>
*{
transform:rotateY ;
}
</style>
</head>
<body>
</body>
</html>
<script>
var temp = zgkbn();
temp.load();
var temp2 = zgkbn();
temp2.load('right');
</script>
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)
})
},
headc:function(res){
var that =this;
},
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);
},
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();
that.head.x = w-that.head.x;
that.leye.x = w-that.leye.x;
that.reye.x = w-that.reye.x;
}
}
}
}
思路解释
- 因为还是想用jquery实现一下,像是渲染3d效果的看板娘我感觉有点不可能,所以我就直接去找了我喜欢的一部番剧的主角之一的图片凑活一下,就是把头身子眼睛分成各自的小图片
- 然后加载的时候直接再按照原图拼回去,这个时候头的图片要盖住眼睛的图片,这样子才不至于爆眼
- 然后我一开始实现给身体实现动态自然动作的,不过我给上的变形都是给一个图片拉伸旋转的,别提纸片人当时的状态贼诡异了,所以我就放弃了
- 然后眼睛移动很简单,我在一开始的时候记录了眼睛的中心距离与它在头部容器中的left和top,然后就监控鼠标事件判断这个眼睛该往哪动,一开始我没考虑到假如看板娘放右边的情况,所以右边的眼睛总是瞄错地方,后面我找到问题之后直接给记录正确的中心点就没问题了
- 至于很多动作情况我都想到了,不过这些动作没搞好,就很诡异了,未完,先碎觉~
还有个头部360度旋转的……