<!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. Freemarker的常用技巧总结

    Freemarker的常用技巧总结 Freemarker视频教程 1,截取字符串 有的时候我们在页面中不需要显示那么长的字符串,比如新闻标题,这样用下面的例子就可以自定义显示的长度 < lt. ...

  2. LINUX下解决netstat查看TIME_WAIT状态过多问题

     来源:多3度热爱 的BLOG   查看连接某服务端口最多的的IP地址 netstat -nat |awk '{print $5}'|awk -F: '{print $1}'|sort|uniq -c ...

  3. sso笔记

    C:\Windows\System32\drivers\etc\hosts SSO:单点登录 1.使用Cookie解决单点登录 技术点: 1.设置Cookie的路径为setPath("/&q ...

  4. 基于windows的ngnix基础使用

    前言 今天组长一大早心血来潮的跟我说,我希望我们小组电脑做web站点的服务器集群,你搞一搞,就用ngnix吧. 君要臣死,臣不得不死.顺便写个文章做个笔记. 简介 Nginx 是一个高性能的HTTP和 ...

  5. NSString、NSMutableString基本使用

    郝萌主倾心贡献.尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助.欢迎给作者捐赠,支持郝萌主.捐赠数额任意.重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 游戏官方下 ...

  6. windows mysql 中文乱码和中文录入提示太大错误的解决方法

    今天操作mysql的时候很郁闷,因为修改默认字符集搞了半天,终于弄成了(关于如何把windows的默认字符集设置成功,可以参看另一篇博文,最终在mysql中输入show variables like ...

  7. web 版发送邮件-已删除

    文章已被删除,如果不便,敬请谅解

  8. [转载]js中__proto__和prototype的区别和关系

          首先,要明确几个点:1.在JS里,万物皆对象.方法(Function)是对象,方法的原型(Function.prototype)是对象.因此,它们都会具有对象共有的特点.即:对象具有属性_ ...

  9. linux sed使用

    原文引用:http://www.cnblogs.com/ggjucheng/archive/2013/01/13/2856901.html [root@www ~]# sed [-nefr] [动作] ...

  10. 3G/4G网卡使用

    整体架构: pppd call option & ----------↓---------- option脚本(设置PPP连接) ----------↓---------- chat脚本(进行 ...