*、学习写了一个能够实现鼠标跟随的小demo，其中还有速度的控制以及超出页面后的处理哦~
详见源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>DIV跟我来</title>
<style>
div{
width:30px;
height:30px;
position:absolute;
background:green;
}
#divshow{
width:100px;
height:100px;
left:700px;
top:0px;
position:absolute;
}
</style>
<script>
window.onload = function() {
var divshow = document.getElementById("divshow");
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
divshow.innerHTML = "X:"+scrollTop +'px'+"<br/>Y:"+scrollLeft+'px';
var divs = document.getElementsByTagName("div");
var i = 0;
document.onmousemove = function(ev) {
var oEvent = ev ||window.event;
for(i = divs.length - 1; i > 0 ; i--) {
//alert(i+"---top:"+divs[i-1].style.top+";-----left:"+divs[i-1].style.left);
divs[i].style.left = (divs[i-1].style.left);
divs[i].style.top = (divs[i-1].style.top);
}
divs[0].style.left = oEvent.clientX+'px';
divs[0].style.top = oEvent.clientY+'px';
//alert(i+"---top:"+divs[0].style.top+";-----left:"+divs[0].style.left);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
divshow.innerHTML = "X:"+(oEvent.clientX+scrollLeft) +'px'+"<br/>Y:"+(oEvent.clientY+scrollTop)+'px'; ;
}
}
</script>
</head>
<body>
<label id="divshow"></label>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
附件有更多好玩的哦~
相关推荐
HTML鼠标跟随特效是一种常见的网页交互设计，用于提升用户体验和页面的视觉吸引力。这种特效使得页面元素根据用户的鼠标移动而动态变化，创造出一种互动的视觉效果。以下是对这个主题的详细阐述： 1. HTML...
HTML鼠标跟随移动是一种常见的网页交互效果，用户在页面上移动鼠标时，某个元素会跟随鼠标的移动轨迹进行相应的位移。这种效果可以增加用户的互动体验，常见于游戏、设计展示或者个性化网页中。本示例将围绕“html...
HTML跟随鼠标特效是一种常见的前端交互设计，通过JavaScript、HTML和CSS技术实现，为网页增加动态视觉效果。这种特效使得页面元素能够根据用户的鼠标移动轨迹进行动态显示，为用户带来更丰富的交互体验。以下是对这...
HTML鼠标跟随猫手动画是一种常见的网页交互特效，它能够增加网站的趣味性和用户体验。这个"Html鼠标跟随猫手动画代码.rar"压缩包包含了实现这一特效的相关文件，主要依赖于jQuery库和CSS3技术。 首先，jQuery是一个...
js 特效 html 特效 跟随鼠标的小球 js 特效 html 特效 跟随鼠标的小球
在本实例"HTML5彩色气泡鼠标跟随特效"中，我们探讨的是如何利用HTML5的Canvas元素和JavaScript来实现一种独特的视觉效果——鼠标跟随的彩色气泡动画。 首先，Canvas是HTML5中的一个核心组件，它是一个二维绘图画布...
"鼠标跟随事件"是一种常见的用户交互事件，它允许元素在屏幕上随着鼠标的移动而移动，为用户提供直观的反馈。这个概念主要适用于Web开发和图形用户界面（GUI）应用。 在JavaScript中，我们可以使用`mousemove`事件...
纯html，鼠标跟随特效，很帅很炫酷。
HTML5鼠标跟随星星光标特效.rar HTML5鼠标跟随星星光标特效.rar HTML5鼠标跟随星星光标特效.rar HTML5鼠标跟随星星光标特效.rar HTML5鼠标跟随星星光标特效.rar HTML5鼠标跟随星星光标特效.rar HTML5鼠标跟随星星...
在压缩包文件名"跟随鼠标flash"中，可能包含的是一个已完成的Flash项目文件，其中包含了实现鼠标跟随效果的所有资源和代码。用户可以使用Adobe Flash Player或者支持SWF格式的浏览器插件来查看和交互这个动画。然而...
在这个“HTML5实现鼠标移动鲸鱼跟随游动特效”的项目中，我们将深入探讨如何利用HTML5的核心技术，特别是Canvas元素，来创建一个有趣的用户体验。 Canvas是HTML5中用于绘制2D图形的标签，它就像一个画布，开发者...
本案例中，“html5 canvas鼠标跟随线条动画特效”是一个利用Canvas API创建的有趣应用，它能够实时追踪用户的鼠标移动，并在Canvas上绘制出变化色彩的线条轨迹。 首先，我们需要理解Canvas的基本结构。在HTML中，...
js 特效 html 特效 跟随鼠标的眼睛 js 特效 html 特效 跟随鼠标的眼睛
1. **index.html**：这是基础示例，可能展示的是一个简单的鼠标跟随效果。当鼠标移动时，元素会沿着鼠标轨迹进行平滑的移动，增加用户的交互体验。 2. **index2.html**：这个可能包含了更复杂的跟随动画，比如元素...
简单的一个 html.鼠标跟随事件，对于初学者来说了可以看看哦。希望帮上到你们；、
在本文中，我们将深入探讨Flash中的“鼠标跟随效果”这一技术，它是一种常见的交互式设计元素，常用于网站、游戏和各种在线互动媒体中。Flash作为一款强大的矢量动画工具，曾经是创建动态Web内容的首选平台，而鼠标...
【标题】"经典鼠标跟随特效.rar"所涉及的知识点主要集中在JavaScript编程领域，特别是与网页交互效果相关的JavaScript特效。这个压缩包可能包含了一个实现鼠标移动时元素跟随鼠标的特效代码示例。 【描述】"经典...
本资源“HTML5鼠标跟随星星光标特效”利用HTML5的Canvas元素，结合JavaScript（JS）技术，实现了独特的鼠标跟随星星光标动画效果。这种特效能够使用户光标的移动伴随着星星闪烁，提升网站的视觉吸引力。 Canvas是...
6. **发布SWF文件**：完成设计和编程后，导出为SWF格式，然后将其嵌入HTML页面中，用户就可以在网页上看到鼠标跟随的特效了。 总的来说，“鼠标跟随特效flash swf”是一种通过Flash技术和ActionScript实现的互动...