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

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

主要实现代码如下：

<!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.pageXvar py = e.pageYvar 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 * maxXvar y = py / dh * maxY$('.eye_ball').css({left: x,top: y})
})

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

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

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

第一版：
第二版：

第三版：

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

图片素材：
renwu_main.png

yan.png

实现窗口动漫人物眼睛跟随鼠标滚动相关推荐

画动漫人物眼睛怎么上色
轻微课网校原创内容,禁止商用转载! 画动漫人物眼睛怎么上色?眼睛上色怎么画?眼睛怎么上色?相信是很多小画家都头疼的地方 !今天给大家带来的是眼睛上色绘画教程,下面开始进入详细的眼睛上色绘画步骤讲解吧! ...
用代码画动漫人物Java_画动漫人物眼睛步骤
画动漫人物眼睛步骤,眼睛是表现漫画人物角色表情和特征最重要的部分之一,眼睛绘制的好坏直接影响到整个头部的效果,下面我们就一起来学习眼睛怎么画吧! 推荐大家可以搜一下:轻微课,或者下载轻微课APP,轻微 ...
使用ShaderGraph制作动漫人物眼睛部分
使用ShaderGraph制作动漫人物眼睛部分实现效果如下图: 实现步骤: 新建HDRP工程,创建Eye Graph(2019版还是处于预览版,正式项目慎用) 节点图如下连接点这里就不详述了,官网 ...
sai动漫人物眼睛素描教程
效果图:http://www.plantcode.cn/chapter/2197 步骤: 1.创建钢笔图层,使用曲线工具按照效果图把线一条条画出来,然后使用笔压工具,鼠标向左拖动控制曲线大小. 2.中 ...
很多人不会画动漫人物眼睛里面的阴影？那今天这个帮到你了！
眼睛里的阴影怎么画?怎样才能画好漫画人物眼睛里的阴影?画好漫画人物眼睛里的阴影有哪些技巧?那么到底怎样才能画好漫画人物眼睛里的阴影呢?今天收集整理了关于眼睛里的阴影怎么画?漫画人物眼睛的画法! 在描绘 ...
怎么画动漫人物的眼睛
怎么画动漫人物的眼睛?今天给大家带来的是动漫眼睛绘画教程,下面开始进入详细的动漫眼睛绘画步骤讲解吧! 一:画两个正圆想要画出萝莉的萌系大眼,可以先画两个正圆来代表眼睛的范围. 二:画两个正圆然后沿 ...
绘画教程：二次元动漫人物的眼睛怎么画？
二次元风格的眼睛怎么画?人物的眼睛怎么画?动漫人物的眼睛怎么画?学习绘画难吗?怎样才能学好绘画?想必这些都是绘画初学者们经常在想的问题吧,就是不知道如何才能绘画好二次元眼睛,不知道如何起稿,也不知道细 ...
动漫绘画教程：动漫人物的眼睛睫毛怎么画？
睫毛怎么画?漫画人物的眼睛怎么画?动漫人物怎么画?眼睛怎么画?学习绘画难吗?怎样才能学习好绘画?想必这些都是绘画初学者们经常在想的问题吧,就是不知道如何才能学习好绘画,然后绘画出自己想要绘画的东西那 ...
动漫人物半透明质感的眼睛怎么画
动漫人物半透明质感的眼睛怎么画绘画过程: 首先介绍一下用gif画眼睛的流程. 以下是详细步骤涂眼睛底色首先,画出眼睛的底色. 当你添加高光时,眼睛会在这个过程中变得越来越亮,所以让我们从比你想要 ...

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

实现窗口动漫人物眼睛跟随鼠标滚动相关推荐

最新文章

热门文章