实现窗口动漫人物眼睛跟随鼠标滚动

mr_cmx

已于 2022-04-06 22:06:44 修改

阅读量1.7k

点赞数 3

文章标签： javascript html5 前端

于 2022-03-27 18:42:03 首次发布

本文链接：https://blog.csdn.net/weixin_44646763/article/details/123703447

版权

最近看到有些网页的右下角有个小人物，这个小人物的眼睛竟然还可以跟随鼠标滚动，感觉挺好玩的。
于是我决定尝试自己写一写这个效果。

主要实现代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.figure{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-90px);
			}
			.renwu_main{
				width: 160px;
				vertical-align: bottom;
			}
			.eye_box {
				position: absolute;
				top: 60px;
				left: 13px;
				width: 160px;
			}
			.eye {
				border: 1px solid #000;
				position: relative;
				display: inline-block;
				margin: 2px;
				border-radius: 50%;
				width: 60px;
				height: 60px;
				box-sizing: border-box;
				background: #FFFFFF;
				overflow: hidden;
				transition: border-width .5s linear;
			}
			.eye_ball {
				width: 22px;
				height: 22px;
				position: absolute;
				border-radius: 50%;
				top: 18px;
				left: 18px;
			}
			.dialogue{
				position: absolute;
				top: 0;
				left: auto;
				transform: translateY(-140%);
				width: 100%;
				display: none;
			}
			.dialogue .dialogueContent{
				border-radius: 50%;
				width: 100%;
				box-sizing: border-box;
				border: 1px solid #555555;
				padding: 18px;
				background: #FFFFFF;
				text-align: center;
			}
			.icon{
				border: 1px solid #555;
				width: 10px;
				transform: rotate(45deg) skewX(46deg) rotate(37deg);
				height: 20px;
				border-top: none;
				border-left: none;
				position: absolute;
				bottom: -10px;
				left: 79px;
				background: #ffffff;
			}
		</style>
	</head>
	<body>
		<div class="figure">
			<img class="renwu_main" src="./imgs/renwu2/renwu_main.png" />
			<div class="eye_box">
				<div class="eye">
					<img class="eye_ball" src="imgs/renwu2/yan.png">
				</div>
				<div class="eye">
					<img class="eye_ball" src="imgs/renwu2/yan.png">
				</div>
			</div>

			<div class="dialogue">
				<div class="dialogueContent">
					......
				</div>
				<div class="icon"></div>
			</div>
		</div>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/index.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$('.figure').on('click', function() {
					var dialogueAtr = [
						"Don't touch me!",
						"莫挨老子！",
						"......",
						"你，你，你干哈？"
					]
					var randomNum = Math.floor(Math.random() * dialogueAtr.length)
					var dialogueStr = dialogueAtr[randomNum]
					$('.dialogueContent').text(dialogueStr)
					$('.eye').css({
						borderBottomWidth: '6px',
						borderTopWidth: '6px'
					})
					$('.dialogue').fadeIn()
					setTimeout(function() {
						$('.dialogue').fadeOut()
						$('.eye').css({
							borderBottomWidth: '1px',
							borderTopWidth: '1px'
						})
					}, 2000)
				})
			})
		</script>
	</body>
</html>

js/index.js（眼睛跟随） :

$(document).on('mousemove', function(e) {
	var px = e.pageX
	var py = e.pageY
	var dw = $(document).width()
	var dh = $(document).height()
	var maxX = $('.eye').width() - $('.eye_ball').width()
	var maxY = $('.eye').height() - $('.eye_ball').height()
	var x = px / dw * maxX
	var y = py / dh * maxY
	$('.eye_ball').css({
		left: x,
		top: y
	})
})

代码不是很多，可以根据需要自行改进

大家可以多练练手，然后用自己喜欢的人物角色来做这个效果，方法都是一样的。

我当时做这个功能也是一步步尝试出来的：

第一版：在这里插入图片描述
第二版：

第三版：

最后我把这个功能做成chrome插件，这样我就可以不管打开什么页面都有这个效果了（至于怎么开发插件这里就不多说了）：

在这里插入图片描述

图片素材：
renwu_main.png
在这里插入图片描述
yan.png

mr_cmx

关注

3
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
实现窗口动漫人物眼睛跟随鼠标滚动

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .figure{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-90px); } .renwu_main{ wi
复制链接

扫一扫