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

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. for循坏的穷举与迭代,while、do while循环

    for循环的穷举:所有情况走一遍,使用if筛选出符合的情况. 单位发一张150元购物卡,到超市买三种洗化用品,洗发水15元,香皂两元,牙刷5元,刚好花完150元,有多少种买法,每种买法各买几样. 百鸡 ...

  2. jquery+ajax(用ajax.dll)实现无刷新分页

    利用ajax.dll那种方式的无刷新,在这就不说了,新朋友可以看下我的另一片文件http://www.cnblogs.com/dachuang/p/3654632.html 首先,这里用的是jquer ...

  3. (三)stm32之串口通信DMA传输完成中断

    一.DMA功能简介 首先唠叨一下DMA的基本概念,DMA的出现大大减轻了CPU的工作量.在硬件系统中,主要由CPU(内核).外设.内存(SRAM).总线等结构组成,数据经常要在内存和外设之间,外设和外 ...

  4. ElasticSearch(ES)和solr的关系和区别

    可以参考这篇文章:http://www.cnblogs.com/chowmin/articles/4629220.html Solr 2004年诞生(当时是Solar). ElasticSearch ...

  5. Object Pascal 方法与技巧

    4 方法与技巧 4.1 设置代码模板 代码模板是Delphi 的代码感知特性的一种,通过它可以快速.高效和正确地输入代码.代码模板将一些常用的语句块保存在模板中,然后程序员只要在代码编辑器中按下“Ct ...

  6. maven Connection refused: connect

    现象: 本地可以访问错误提示中的地址.但使用maven无法下载jar包. 环境: 浏览器上网需要使用代理 解决方法: 设置成正常代理可以.具体方法可以下载一个代理工具.只要IE配置成能直接访问http ...

  7. 一次DB2数据库连接失败(SQLSTATE=08001)的解决方法

    有一次,在使用DbVisualizer工具连接自己linux虚拟机上的DB2数据库时,报如下错误: Product: DbVisualizer Pro 9.1 Build: #2050 (2013/0 ...

  8. 第三章 Python容器:列表、元组、字典与集合

      数据结构的分类依据?基本的"数组"在python中是列表, 数据结构的作用?容器,盛放数据,是由原子组成的分子.可以将一群数据进行整合.拆分.重排. 3.2 列表 列表是啥?顺 ...

  9. linux笔记:linux常用命令-帮助命令

    帮助命令:man(获得帮助信息) 帮助命令:help(获得shell内置命令的帮助信息)

  10. 20145218 《Java程序设计》第三周学习总结

    20145218 <Java程序设计>第三周学习总结 教材学习内容总结 定义类 编写程序要产生对象就要先定义类.类是对象的设计图,对象是类的实例.类定义时使用class关键词,建立实例时, ...