[Js]跟随鼠标移动的div
例子:鼠标移动到一块东西上,出现提示文本框,并且提示文本框跟着鼠标的位置动
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的更多相关文章
- html页面设置一个跟随鼠标移动的DIV(jQuery实现)
说明业务:鼠标放到某个标签上,显示一个div,并跟随鼠标移动 html页面(直接放body里面): <a href="#" id="'+data[i].refund ...
- 鼠标移动事件(跟随鼠标移动的div)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js跟随鼠标移动的写法
<script> window.onload=function(){ document.onmousemove=function (ev) { var oEvent=ev||event; ...
- JS打造的跟随鼠标移动的酷炫拓扑图案
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 一款基于TweenMax跟随鼠标单击移动的div
今天给大家分享一款基于TweenMax跟随鼠标单击移动的div.在这款实例中你可以单击任意位置,div会移动到你单击的位置.效果图如下: 在线预览 源码下载 实现的代码. html代码: < ...
- JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习
JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...
- js进阶 12-3 如何实现元素跟随鼠标移动
js进阶 12-3 如何实现元素跟随鼠标移动 一.总结 一句话总结:获取鼠标位置,将鼠标位置设置为元素偏移即可. 1.用什么事件获取鼠标位置? 用mousemove可以获取鼠标移动的时候的位置 $(d ...
- div跟随鼠标移动
1.目标是实现div跟随鼠标而移动,分三种情况进行实现 a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能 第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法. 1)获取鼠 ...
- js判断鼠标位置是否在某个div中
div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办 ...
随机推荐
- [转]ubuntu环境变量配置文件
参考网址:http://www.bkjia.com/Linuxjc/1008127.html Ubuntu通常使用的几个配置文件主要有下面这几个: /etc/environment./etc/prof ...
- [转载] 数据库分析手记 —— InnoDB锁机制分析
作者:倪煜 InnoDB锁机制常常困扰大家,不同的条件下往往表现出不同的锁竞争,在实际工作中经常要分析各种锁超时.死锁的问题.本文通过不同条件下的实验,利用InnoDB系统给出的各种信息,分析了锁的工 ...
- (四)Ubuntu 14.04 文件服务器--samba的安装和配置
samba是Linux系统上的一种文件共享协议,可以实现Windows系统访问Linux系统上的共享资源,现在介绍一下如何在Ubuntu 14.04上安装和配置samba一. 一.更新源列表 打开&q ...
- Android开发面试经——6.常见面试官提问Android题②(更新中...)
版权声明:本文为寻梦-finddreams原创文章,请关注:http://blog.csdn.net/finddreams 关注finddreams博客:http://blog.csdn.net/fi ...
- Http报头Accept与Content-Type的区别
Http报头Accept与Content-Type的区别 1.Accept属于请求头, Content-Type属于实体头. Http报头分为通用报头,请求报头,响应报头和实体报头. 请求方的http ...
- 线程池的应用及Callable接口的使用
public interface Executor { /** * Executes the given command at some time in the future. The comman ...
- 详解DHV:怎么具体展示高价值
我的理解里面:高价值分两个部分,一个是静态的,一个是动态的. 我把静态的称为硬性指标,动态的称为软性指标. 下面我给大家仔细解释一下两个指标的具体展示. ----------------------- ...
- iOS 国际化多语言设置 xcode7
iOS 国际化多语言设置 方式一: 1. 在storyboard中创建好UI,然后在 project 里面 Localizables 栏目里面,添加你需要的语言:默认是Englist; 比如这里我添 ...
- js封装,一个JS文件引用多个JS文件
(function() { //加载 varobj = {}; /** * 动态加载脚本函数 * @param url 要加载的脚本路径 * @param callback ...
- jQuery用户从服务器端注册登录
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...