js案例练习：跟随鼠标移动的小天使

1.实现效果：鼠标移动到哪，小天使跟到哪

2.思路：

（1）为了让鼠标在天使的中央，可以将横坐标和纵坐标分别减去天使高度和宽度的一半。

（2）注意设置top和left的值的时候，不要忘记加px

3.代码：

<!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>跟随鼠标移动的天使</title><style>img {position: absolute;top: 0px;}</style>
</head>
<body><img src="天使.png" alt=""><script>var img  = document.querySelector('img');document.addEventListener('mouseover',function(e) {//千万不要忘记加px值img.style.left = e.pageX-40+'px';img.style.top = e.pageY+50+'px';})</script>
</body>
</html>

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=& ...
鼠标跟随案例：用js实现盒子跟随鼠标移动
需求:当我们鼠标放在div身上时,它的孩子p标签能够显示,而且跟着鼠标一起移动, 思路: ● 想让p标签跟着鼠标一起移动:运用鼠标移动事件,还需要p标签定位:(mousemove:鼠标移动事件) ● ...
JS实现眼睛跟随鼠标特效
效果展示 JS使用眼睛跟随特效代码展示实现原理见代码注释 <div class="face"><div class="eye">&l ...
js之div跟随鼠标移动
一.主要用到的相关属性: 1)onmouseover 2)clientX.clientY 3)pageX.pageY 4)document.body.scrollTop 5)document.docu ...
JS制作跟随鼠标移动的图片
JS制作跟随鼠标移动的图片有趣的小案例池子: JS实现定时器 JS实现关闭图片窗口 JS实现输入检验获取焦点后隐藏提示内容的输入框 JS实现获取鼠标在画布中的位置聊天信息框显示消息 JS点击切换 ...
JavaScript Web APIs部分参考pink老师ppt（网页常见的js案例）
JavaScript基础知识 JavaScript Web API DOM DOM 树获取元素根据 ID 获取根据标签名获取获取特殊元素(body,html) 获取body元素获取html元 ...

js案例练习：跟随鼠标移动的小天使

js案例练习：跟随鼠标移动的小天使相关推荐

最新文章

热门文章