<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<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跟随鼠标移动的更多相关文章

  1. div跟随鼠标移动

    1.目标是实现div跟随鼠标而移动,分三种情况进行实现 a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能 第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法. 1)获取鼠 ...

  2. javascript元素跟随鼠标在指定区域运动

    元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中,下面是完整的Demo: <!DOCTYPE html> <html lang="en"> <h ...

  3. 一组div跟随鼠标移动，反应鼠标轨迹

    <!DOCTYPE html> <html> <head> <title>div随鼠标移动</title> <style type=& ...

  4. javascript 一串DIV跟随鼠标移动

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. 完整的html+css+javascript实现跟随鼠标移动显示选中效果

    1,显示效果: 2,html结构 <div class="process_list-lpu"> <div class="process_line&quo ...

  6. javascript创建跟随鼠标好玩的东西

    不说话,直接上代码. css: #createGoDivBox{ display: none; } #createGoDivBox div{ background-color: #00A6C2; po ...

  7. 鼠标拖动div，div跟随鼠标移动效果

    <div id="boxDiv" style='width:20px;height:20px;position:absolute;background:red;'>   ...

  8. js 实现div跟随鼠标移动

    今天看到了一个自己可以随心所欲的拖到div到页面的任意位置.感觉挺好的,就心血来潮的查询了一下,看看网友做的 代码如下: <script>function doit(){ var obj ...

  9. jquery对div元素进行鼠标移动（稍稍修改下可以实现div跟随鼠标）

    /* 网上找了资料都是对于event.clientX和offset().left进行了计算,但是去掉了这个计算方式,直接使用当前坐标也一样,效果都一样不太好 strHeader:标题 jquery定位 ...

随机推荐

  1. Yii框架中ActiveRecord使用Relations

    参考文章: http://blog.csdn.net/yjj1s/article/details/6885276 http://www.gowhich.com/blog/38 http://www.c ...

  2. iOS9上的Universal Link实现（教程）

    1.Universal Link 理解为苹果官方支持deeplink就行了 2.通过点击HTTP链接启动APP Web・iOS应用在支持Universal Link的前提下,当用户点击特点的链接时会自 ...

  3. cas改造随笔

    原http://www.cnblogs.com/hellowood/archive/2010/08/05/1793364.html 键字: sso域名:cas.server.com 登陆地址(spri ...

  4. Servlet文件上传(ServletFIleUpload,DiskFileItemFactory,FileItem)

    1:我们学的是表单文件上传,就是在一个FORM中提交相应的信息,和之前我们的提交的注册信息之类的表单是不同的,所以要先改变一下FORM的属性,enctype="multipart/form- ...

  5. Maven tomcat插件配置和使用

    pom.xml组态 <build>   <plugins>         <plugin>                  <groupId>org ...

  6. Java中的守护线程 & 非守护线程（简介）

    Java中的守护线程 & 非守护线程 守护线程 (Daemon Thread) 非守护线程,又称用户线程(User Thread) 用个比较通俗的比如,任何一个守护线程都是整个JVM中所有非守 ...

  7. hadoop错误Could not obtain block blk_XXX_YYY from any node：java.io.IOException：No live nodes contain current block

    错误: 10/12/08 20:10:31 INFO hdfs.DFSClient: Could not obtain block blk_XXXXXXXXXXXXXXXXXXXXXX_YYYYYYY ...

  8. PureMVC(JS版）源码解析（十）：Controller类

          这篇博客我们继续讲解PureMVC的三大核心类(View/Controller/Model)——Controller类.根据PureMVC模块设计,Controller类保存所有的Comm ...

  9. Quartz.NET simple_demo

    Quartz.NET是一个开源的作业调度框架,非常适合在平时的工作中,定时轮询数据库同步,定时邮件通知,定时处理数据等. Quartz.NET允许开发人员根据时间间隔(或天)来调度作业.它实现了作业和 ...

  10. Android开发之Activity（活动）

    在安卓中,Activity(活动)就是一个包含应用程序的用户界面的窗口.一个应用程序可以包含一个或多个Activity. 一般一个活动对应一个UI文件,即xml文件.创建活动一般是基础Activity ...