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

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. 操作符 Thinking in Java 第三章

    3.1 更简单的打印语句 3.2 使用Java操作符 3.3 优先级 *int类型+String类型  直接转换为String类型 3.4 赋值 1. *引用=引用  两个引用指向同一个对象,所以操作 ...

  2. [转载] 高效 MacBook 工作环境配置

    原文: http://mp.weixin.qq.com/s?__biz=MjM5NzMyMjAwMA==&mid=208231200&idx=1&sn=8a76ddc56c1f ...

  3. [转载] 彻底学习STL中的Allocator

    原文: http://cissco.iteye.com/blog/379093 帮助我们理解allocator的原理 Allocator是C++语言标准库中最神秘的部分之一.它们很少被显式使用,标准也 ...

  4. ORA-32004 参数设置过时的解决办法

    启动时报错: 查看日志: view /opt/oracle11g/app/db/diag/rdbms/yldev/yldev/trace/alert_yldev.log 原来是plsql_debug ...

  5. 【Python】输出中文字符串的两种方法

    print u"中文"   # -*- coding: utf-8 -*-   这句话放在最上面,记得是最上面,顶格写 这样,print后,字符串前就不用加u了

  6. switch-case 执行顺序

    switch(expression){ case value : //语句 break; //可选 case value : //语句 break; //可选 //你可以有任意数量的case语句 de ...

  7. iOS 使用drawRect: 绘制虚线椭圆

    iOS 使用drawRect: 绘制虚线椭圆 1:首先如果要使用 drawRect 绘图 要导入 CoreGraphics.framework 框架 然后 创建 自定义view, 即是 myView继 ...

  8. mysql设置编码

    1.修改数据库的编码   将数据库(test)的编码方式修改为utf8,如:   ALTER DATABASE `test` DEFAULT CHARACTER SET utf8 COLLATE ut ...

  9. js时间差转为天数

    function DateDiff(sDate1, sDate2){ //sDate1和sDate2是2006-12-18格式 var aDate, oDate1, oDate2, iDays aDa ...

  10. IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常

    标准参考 根据W3C CSS2.1规范第8.3节中的描述,边距属性设置了一个框的边距区的宽度.'margin' 缩写属性设置所有四边的边距,而其它的边距属性( 'margin-top' ,'margi ...