每天一个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度旋转的……

每天学一个jquery插件-做个看板娘1

每天一个jquery插件-做个看板娘1

做个看板娘1

猜你喜欢