js实现跟随鼠标移动的小球

2024-04-11 02:56:17

本文实例为大家分享了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;color:#fff;text-align: center;line-height: 50px; position: absolute;transition: all 0.5s; }
  #div2{width: 50px;height: 50px;background: green;color:#fff;text-align: center;line-height: 50px;position:
  absolute;transition: all 0.5s; }

  .box1{
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;
  }
  .box2{
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;
    }
</style>

<body>
  <div class="box1" onmousemove="b1()">
    <div id="div1" >1</div>
  </div>
  <div class="box2" onmousemove="b2()">
    <div id="div2">2</div>
  </div>
</body>
<script type="text/javascript">
  function b1(ev) {
    var oEvent = ev || event;
    var oDiv = document.getElementById('div1');
    if( oEvent.clientX<350&&oEvent.clientY<350){
    oDiv.style.left = oEvent.clientX + 'px';
    oDiv.style.top = oEvent.clientY + 'px';
    }

  }
  function b2(ev){
    var oEvent=ev||event;
    var oDiv=document.getElementById('div2');
    if( oEvent.clientX<350&&oEvent.clientY<750){
      oDiv.style.left=oEvent.clientX+'px';
      oDiv.style.top=oEvent.clientY+'px';
    }
  }
</script>
</html>

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

js图片跟随鼠标移动代码

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

JavaScript获取鼠标移动时的坐标(兼容:IE8.谷歌.Firefox.Opera ),测试通过直接复制成html文件,即可运行. 为方便大家测试特准备了一份在线演示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo
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.o
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+html+css实现鼠标移动div实例

js: 复制代码代码如下: var posX; var posY; fdiv = document.getElementById("divBody"); document.getElementById("divHead").onmousedown=function(e) { if(!e) e = window.event; //IE posX = e.clientX - parseInt(fdiv.style.left); posY = e.clientY - p
js鼠标移动在title中显示图片的效果代码

1.js代码复制代码代码如下: //***********默认设置定义.********************* tPopWait=50;//停留tWait豪秒后显示提示. tPopShow=5000;//显示tShow豪秒后关闭提示 showPopStep=20; popOpacity=99; //***************内部变量定义***************** sPop=null; curShow=null; tFadeOut=null; tFadeIn=null; tFa
JS实现鼠标移动到缩略图显示大图的图片放大效果

一个网页上用的图片提示效果,当把鼠标移动到图片缩略图的时候,会显示图片大图,似乎在网上这是个很常见的效果,实现方法也比较多,有人用CSS,有人用JavaScript,有人用jQuery,总之,选择自己习惯的方式去实现,就是最棒的. 图片提示效果 body{margin:0 ;padding:40px;line-height:180%;} img{border:none;} ul,li{margin:0 ;padding:0;} li{list-style:none;display:inline;
js鼠标移动时禁止选中文字

这是通过CSS样式来实现的禁止用鼠标选择功能: unselectable为IE准备 onselectstart为Chrome.Safari准备 -moz-user-select是FF的 css style:html,body{-moz-user-select: none; -khtml-user-select: none; user-select: none;} 或 <div unselectable="on" onselectstart="return false;&
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例

-1.右侧弹出导航菜单完整代码复制代码代码如下: <!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> <met
js实现文字跟随鼠标移动而移动的方法

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

js实现跟随鼠标移动的小球

相关推荐

随机推荐