javascript DIV实现跟随鼠标移动

2024-07-30 16:29:04

本文实例为大家分享了javascript DIV实现跟随鼠标移动的具体代码，供大家参考，具体内容如下

首先介绍的是一个div跟随鼠标移动的效果，具体代码如下

javascript div跟随鼠标移动

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script type="text/javascript">
 window.onload = function () {
  var div1 = document.getElementById('div1');
  document.onmousemove = function (ev) {
  //IE支持event，firefox不支持
  var oEvent = ev || event;
  //
  var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  div1.style.top = oEvent.clientY + scrollTop + 'px'; //Y
  div1.style.left = oEvent.clientX + scrollLeft + 'px';//X
  };
 };

 </script>
</head>
<body>
 <div id="div1" style="width: 10px; height: 10px; background-color: blue; position: absolute;"></div>
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
 <br />
</body>
</html>

现在为大家分享的是javascript 一串DIV跟随鼠标移动

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title></title>
 <style type="text/css">
 div {
  width: 2px;
  height: 2px;
  background-color: red;
  position: absolute;
 }
 </style>
 <script type="text/javascript">
 window.onload = function () {
  var oDivs = document.getElementsByTagName('div');
  document.onmousemove = function (ev) {
  var oEvent = ev || event;
  document.getElementsByTagName('span')[0].innerHTML = oEvent.clientY + '|' + oEvent.clientX;
  for (var i = oDivs.length-1; i > 0; i--) {
   oDivs[i].style.top = oDivs[i - 1].style.top;
   oDivs[i].style.left = oDivs[i - 1].style.left;
  }
  oDivs[0].style.top = oEvent.clientY+'px';
  oDivs[0].style.left = oEvent.clientX + 'px';
  };

 };
 </script>
</head>
<body>
 <span></span>
 <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>
 <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>
 <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>
 <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>
 <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>
 <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>
 <div></div>

</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助。

使用JS实现气泡跟随鼠标移动的动画效果

气泡跟随鼠标移动,并在每次点击时产生不同的变化效果如下 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 简单的气泡效果 </title> <style type="text
js实现文字跟随鼠标移动而移动的方法

本文实例讲述了js实现文字跟随鼠标移动而移动的方法.分享给大家供大家参考.具体分析如下: 这是一款非常简单的鼠标特性代码,在网页中移动鼠标的时候,后面跟着一串文字跟随者鼠标移动复制代码代码如下: <html> <head> <style type="text/css"> .spanstyle { COLOR: 000000; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY:
js实现跟随鼠标移动的小球

本文实例为大家分享了js实现跟随鼠标移动的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>follow mouse</title> </head> <style type="text/css"> *{ margin: 0; padding:0; } #div1{width: 50px;height: 50px;background: red;
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层

很多网站,当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层,并且此层能够跟随鼠标移动,同时弹出的层带有箭头,此箭头指向鼠标悬浮的元素,下面就通过实例代码简单介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta nam
js实现图片放大并跟随鼠标移动特效

图片跟随鼠标移动并放大js特效,供大家参考,具体内容如下很多网站有类似于淘宝放大镜的效果,只不过这里说的是 " 不仅能直接放大,而且会跟随鼠标移动 " ! 类似于" DEDECMS "官网的案例中心的效果 ! 本案例代码,效果图,代码,参考如下: JS代码: <script> //展示 function showBigPic(filepath) { //将文件路径传给img大图 document.getElementById('bigPic').src
javascript跟随鼠标x,y坐标移动的字效果

跟随鼠标x,y坐标移动的字效果 function oMove() { var x=event.x; var y=event.y; if (y>0&&y200&&x 移动的字! 移动的字! [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
javascript实现跟随鼠标移动的图片

本文实例为大家分享了javascript实现图片跟随鼠标移动的具体代码,供大家参考,具体内容如下实现思路 1.给 document 绑定 mousemove 事件,获取鼠标的坐标:e.pageX ,e.pageY 2.将图片设置成绝对定位:position: absolute; 3.获取图片元素对象,将鼠标的 x , y 坐标分别赋值给图片的 left , top 值,为了时鼠标在图片中间,可以减去图片宽高的一半,让图片位置向上向左,注意:不要忘记加上单位 'px' 小知识: e.clien
js实现图片跟随鼠标移动效果

本文实例为大家分享了js实现图片跟随鼠标移动效果的具体代码,供大家参考,具体内容如下 <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { width: 1000px; height: 600px; background: #cecece; margin: 20px auto; } img{ width: 5
javascript实现图片跟随鼠标移动效果的方法

本文实例讲述了javascript实现图片跟随鼠标移动效果的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片跟着鼠标走</title&g
js图片跟随鼠标移动代码

在很多网站上能看到图片跟随鼠标移动的JS特效,其实做法很简单,在这里与大家分享下. 在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里,http://www.jb51.net/article/17266.htm. 我们用到的只有这个对象的两个属性,clientX与clientY,就是触发当前事件(可能是Click,也肯能是onmousemove等等事件)时鼠标在窗口区域的X,Y坐标(它们都是只读属性,所以只

javascript DIV实现跟随鼠标移动

相关推荐

随机推荐