案例：鼠标精灵跟随效果

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}#div1{width: 274px; height: 336px;background: url(timg.gif) no-repeat;position: absolute;}body{background-color: black;}</style><script>window.onload = function(){var oDiv = document.getElementById("div1");document.onmousemove = function(ev){var e = ev || window.event;oDiv.style.left = e.clientX - 50 + 'px';oDiv.style.top = e.clientY - 100 + 'px';}}</script>
</head>
<body><div id = "div1"></div>
</body>
</html>

实现效果：

相关知识：
事件类型的种类
鼠标事件对象的属性

案例：鼠标精灵跟随效果相关推荐

ES6与canvas实现鼠标小球跟随效果
最近闲来无聊,看了下ES6的语法,结合canvas实现了动画特效--随着鼠标的移动,会有小球跟随且自动消失的动画. 首先,html部分,目前就一个canvas标签. 1 <canvas id=& ...
图片跟随鼠标样式跟随效果（附完整代码及效果）
Demo效果如下: 完整代码如下: <!DOCTYPE html> <html lang="en"><head><meta charset ...
不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果原文:不可思议的纯 CSS 实现鼠标跟随效果直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
【js】鼠标跟随效果
1.实现思想 ①鼠标跟随效果,发生在鼠标移动的时候,故需要使用onmousemove事件 ②当页面内容多于1屏时,就需要考虑滚动距离的问题 ③想实现鼠标跟随的效果需要:元素的left位置 = 鼠标当前 ...
js实现鼠标跟随效果
在平时开发中,实现鼠标跟随效果并不是很常见,但是在一些个人博客和个人网站中这个效果有时候会用到有些游戏网站中也会用到这个效果.这里分享的是一个例子.代码如下,, 注意我这里跟随的是一个图片,也可以根 ...
mousemove实现图片鼠标跟随效果
前言用html+css+JavaScript实现了一个图片鼠标跟随效果一.思路鼠标不断的移动,使鼠标移动事件:mousemove: 在页面中移动,给document注册事件: 图片要移动距离,而 ...
JavaScript实现心形div块跟随鼠标移动(幻影效果)
JavaScript实现心形div块跟随鼠标移动(幻影效果) 上篇博客讲解了怎样利用JavaScript实现一串div块跟随鼠标指针移动,然后有轩辕问我,想给女朋友做一个好看的可不可以.现在我们来实现 ...
【Unityamp;NGUI】UI精灵跟随鼠标移动
NGUI的背包系统UI,有时候会发生鼠标与UI精灵不跟随的问题 1.直接在UIDragDropItem文件里面把下面的函数改动如下 protected virtual void OnDragDropM ...
怎么给html增加鼠标跟随,js实现简单鼠标跟随效果的方法
本文实例讲述了js实现简单鼠标跟随效果的方法.分享给大家供大家参考.具体分析如下: 鼠标跟随,顾名思义,就是在鼠标移动的时候,有个动画跟随着鼠标一起移动. 要点一: var oEvent = evt ...

案例：鼠标精灵跟随效果

案例：鼠标精灵跟随效果

案例：鼠标精灵跟随效果相关推荐

最新文章

热门文章