例子:鼠标移动到一块东西上,出现提示文本框,并且提示文本框跟着鼠标的位置动

document.onmouseover=function(ev){

var oEvent=ev||event;

var box=document.getElementById("box");

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;        //前面是兼容非谷歌浏览器,后面是兼容谷歌浏览器

var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

box.style.top=oEvent.clientX+scrollTop+'px';     //clientX,clientY是可视区的距离,一般来说用到clientX,clientY,就一定要加滚动距离

box.style.left=oEvent.clientY+scrollLeft+'px';

}

延伸例子:鼠标移动,一串小东西跟着动

分析:一堆div在同一个位置,后面一个div跟着前面一个div动,第一个div跟着鼠标动

window.onload=function(){

var div=document.getElementsByTagName("div");

var i;

document.onmousemove=function(ev){

var oEvent=ev||event;

for(i=div.length-1;i>0;i--){

div[i].style.left=div[i-1].style.left;

div[i].style.top=div[i-1].style.top;

}

div[0].style.left=oEvent.clientX+'px';

div[0].style.top=oEvent.clientY+'px';

};

}

[Js]跟随鼠标移动的div的更多相关文章

  1. html页面设置一个跟随鼠标移动的DIV(jQuery实现)

    说明业务:鼠标放到某个标签上,显示一个div,并跟随鼠标移动 html页面(直接放body里面): <a href="#" id="'+data[i].refund ...

  2. 鼠标移动事件(跟随鼠标移动的div)

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  3. js跟随鼠标移动的写法

    <script> window.onload=function(){ document.onmousemove=function (ev) { var oEvent=ev||event; ...

  4. JS打造的跟随鼠标移动的酷炫拓扑图案

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 一款基于TweenMax跟随鼠标单击移动的div

    今天给大家分享一款基于TweenMax跟随鼠标单击移动的div.在这款实例中你可以单击任意位置,div会移动到你单击的位置.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  6. JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习

    JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...

  7. js进阶 12-3 如何实现元素跟随鼠标移动

    js进阶 12-3 如何实现元素跟随鼠标移动 一.总结 一句话总结:获取鼠标位置,将鼠标位置设置为元素偏移即可. 1.用什么事件获取鼠标位置? 用mousemove可以获取鼠标移动的时候的位置 $(d ...

  8. div跟随鼠标移动

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

  9. js判断鼠标位置是否在某个div中

    div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办 ...

随机推荐

  1. JavaScript基础知识之——Location 对象详解

    属性 描述 location.hash 设置或取得 URL 中的锚 location.host 设置或取得 URL 中主机(包括端口号) location.hostname 设置或取得 URL 中的主 ...

  2. [转载] zookeeper 事件通知

    ZK事件回调当一个client访问ZK时,client与ZK保持长连接.应用可以通过client的api注册一些callback,当对应的事件发生时,client会执行对应的callback.如果你基 ...

  3. SQL 调优专题总结

    oracle 的优化器: oracle 有两种优化器:基于规则的优化器(rbo/rule based optimizer)和基于代价的优化器(cbo/cost based optimizer). 有时 ...

  4. mtk lcm驱动加载流程 (转载)

    平台:mt6582 + Android 4.4 前面就说过,在mtk代码中支持屏是可兼容的,通过调用驱动中的compare_id函数来匹配驱动和屏,这里来细看一下代码. 1. LK部分(mediate ...

  5. poj1266Cover an Arc(三角形外接圆)

    链接 求出三角形的外接圆,通过圆心和半径可以知道这个圆的上下左右最远点,分别判断这个四个点跟弧的两端点A,B的关系,假如判断P点,弧内给出点为C,判断PC是否与AB相交即可判断出P是否在弧上. 精度问 ...

  6. curl的简单使用

    <?php namespace Home\Controller; use Think\Controller; class IndexController extends Controller { ...

  7. Object Pascal 数据类型

     数据类型与定义变量 Object Pascal 语言的最大特点是对数据类型的要求非常严谨.传递给过程或函数的参数值必须与形参的类型一致.在Object Pascal 语言中不会看到像C 语言编译器提 ...

  8. Oracle SQL 调优之 sqlhc

    SQL 执行慢,如何 快速准确的优化. sqlhc 就是其中最好工具之一 通过获得sql所有的执行计划,列出实际的性能的瓶颈点,列出 sql 所在的表上的行数,每一列的数据和分布,现有的索引,sql ...

  9. 针对ASP.NET页面实时进行GZIP压缩优化的几款压缩模块的使用简介及应用测试!(附源码)

    在介绍之前,先简单说一说ASP.NET服务端GZIP压缩模块的作用及工作原理,很多人编写网页的时候页面因为使用了大量的JS特效又或者放置很多大型动态广告导致了页面或脚本体积庞大,通常都会使用一些压缩工 ...

  10. c++ 对象内存分配和虚函数

    1. c++类对象(不含虚函数)在内存中的分布 c++类中有四种成员:静态数据.非静态数据.静态函数.非静态函数. 1. 非静态数据成员放在每个对象内部,作为对象专有的数据成员 2. 静态数据成员被抽 ...