美文网首页
2020-11-23图片跟随鼠标练习&&icon制作

2020-11-23图片跟随鼠标练习&&icon制作

作者: 大佬教我写程序 | 来源:发表于2020-11-23 22:04 被阅读0次

功能  

图片会跟随鼠标一起移动

基本思路

先通过document.addEventListener('mousemove', function(){})获取到鼠标的位置,该两个属性分别给图片定位的坐标

鼠标在图片上,截不了鼠标

html框架

html框架

JavaScript框架

红色框框是易王点

补充事件监听容易迷惑的的知识点

执行顺序:keydown ------->onkeypress --------->信息输进去------->onkeyup

onkeyup            某个按键被松开时触发(随意一个按键&&不区分大小写)

onkeydown       某个按键被按下时触发(随意一个按键&&不区分大小写)执行顺序 :     键盘按下---->绑定keydown事件触发------>按键信息输入进去

onkeypress        某个按键被按下时触发(不识别功能键&&区分大小写,例如 ctrl  shift)     键盘按下---->绑定keydown事件触发------>按键信息输入进去

icon图标制作

效果

通过第三方创建.con的图标

比特虫(http://www.bitbug.net/

比特虫(http://www.bitbug.net/)

传到自己的项目里,在head里用link引入

link引入

结束

相关文章

网友评论

      本文标题:2020-11-23图片跟随鼠标练习&&icon制作

      本文链接:https://www.haomeiwen.com/subject/ajqbiktx.html