HTML+CSS+JS案例展示(跟随鼠标移动的小人)

参考来源：

JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili

网页GitHub地址如下：（若加载较慢建议刷新后耐心等待一会~）

js_mousemove

主要功能：

鼠标移动时，动图小人会随着鼠标一起移动

网页代码如下：

HTMLHTML+CSS+JS：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js_mousemove</title><style>img {position: absolute;width: 70px;top: 2px;}</style>
</head>
<body><img src="pic.gif" alt=""><script>var img = document.querySelector('img');document.addEventListener('mousemove',function(e) {var x = e.pageX;var y = e.pageY;img.style.left = x - 35 + 'px';img.style.top = y - 40 + 'px';})</script>
</body>
</html>

HTML+CSS+JS案例展示(跟随鼠标移动的小人)相关推荐

HTML+CSS+JS案例展示(留言板)
参考来源: JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili ...
773-780---DOM事件高级（常用鼠标事件，案例：跟随鼠标的天使，常用的键盘事件，案例：模拟京东按键输入内容，案例：模拟京东快递单号查询）
文章目录事件高级 7 常用的鼠标事件 7.1常用的鼠标事件 7.2 鼠标事件对象案例:跟随鼠标的天使 8 常用的键盘事件 8.1 常用的键盘事件 8.2 键盘事件对象 8.3 ASCII 表案例 ...
html动态跟随鼠标效果,使用JS实现气泡跟随鼠标移动的动画效果
气泡跟随鼠标移动,并在每次点击时产生不同的变化效果如下简单的气泡效果 body{background-color:#000000;margin:0px;overflow:hidden} var c ...
html5随鼠标移动动画,使用JS实现气泡跟随鼠标移动的动画效果
气泡跟随鼠标移动,并在每次点击时产生不同的变化效果如下简单的气泡效果 body{background-color:#000000;margin:0px;overflow:hidden} var c ...
js效果 div跟随鼠标移动
js效果 div跟随鼠标移动 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
HTML+CSS+JS实现图片跟踪鼠标
HTML+CSS+JS实现图片跟踪鼠标啥也不说上效果然然我的然然prpr 好吧没效果复制康康 //注释html 不然会出错 ...
鼠标跟随案例：用js实现盒子跟随鼠标移动
需求:当我们鼠标放在div身上时,它的孩子p标签能够显示,而且跟着鼠标一起移动, 思路: ● 想让p标签跟着鼠标一起移动:运用鼠标移动事件,还需要p标签定位:(mousemove:鼠标移动事件) ● ...
JS实现眼睛跟随鼠标特效
效果展示 JS使用眼睛跟随特效代码展示实现原理见代码注释 <div class="face"><div class="eye">&l ...
html最美观的卡片列表,信息列表效果：卡片、列表切换（HTML+CSS+JS案例）
涉及知识点:HTML+CSS+JS DOM 案例效果: 列表模式-卡片模式互换.gif 案例源码: *{margin:0px;padding: 0px;} body{font: "微软雅黑& ...

HTML+CSS+JS案例展示(跟随鼠标移动的小人)

网页GitHub地址如下：（若加载较慢建议刷新后耐心等待一会~）

主要功能：

网页代码如下：

HTMLHTML+CSS+JS：

HTML+CSS+JS案例展示(跟随鼠标移动的小人)相关推荐

最新文章

热门文章