html页面设置一个跟随鼠标移动的DIV(jQuery实现)
说明业务:鼠标放到某个标签上,显示一个div,并跟随鼠标移动
html页面(直接放body里面):
<a href="#" id="'+data[i].refundId+'"OrderInform"" data-placement="right" onmouseover="tip.start(this)" style="color:#00FFCC;left:;top:;"> 测试标签</span></a>
<div class="" id="OrderInform" style="position:absolute;display:none;width:217px;height:500px;border:solid 5px #000000">测试框</div>
jQuer:
var tip={
$:function(ele){
if(typeof(ele)=="object")
return ele;
else if(typeof(ele)=="string"||typeof(ele)=="number")
return document.getElementById(ele.toString());
return null;
},
mousePos:function(e){
var x,y;
var e = e||window.event;
return{ x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop};
},
start:function(obj){
var self = this;
obj.onmousemove=function(e){
console.log(e)
var mouse = self.mousePos(e);
console.log(mouse)
var left= mouse.x + 'px';
var top= mouse.y + 'px';
if(mouse.y+400>900){
top=mouse.y-500+'px';
}
$("#OrderInform").css({'top':top,'left':left});
$("#OrderInform").show();
};
obj.onmouseout=function(){
$("#OrderInform").hide(); //失去焦点关闭
};
}
}
(没有太按语法结构来弄,但是主要代码都在上面)
html页面设置一个跟随鼠标移动的DIV(jQuery实现)的更多相关文章
- [Js]跟随鼠标移动的div
例子:鼠标移动到一块东西上,出现提示文本框,并且提示文本框跟着鼠标的位置动 document.onmouseover=function(ev){ var oEvent=ev||event; var b ...
- 鼠标移动事件(跟随鼠标移动的div)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 在vue中写一个跟着鼠标跑的div,div里面动态显示数据
1.div应该放在body里面,这是我放在body中的一个div里面的div <!-- 信息查看层 --> <div class="floatDiv" :styl ...
- 一款基于TweenMax跟随鼠标单击移动的div
今天给大家分享一款基于TweenMax跟随鼠标单击移动的div.在这款实例中你可以单击任意位置,div会移动到你单击的位置.效果图如下: 在线预览 源码下载 实现的代码. html代码: < ...
- div跟随鼠标移动
1.目标是实现div跟随鼠标而移动,分三种情况进行实现 a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能 第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法. 1)获取鼠 ...
- 【翻译】使用CSS3和jQuery制作跟随鼠标方位的Hover特效
今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果.当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑 ...
- Javascript之盒子拖拽(跟随鼠标、边界限定、轨迹回放)
本文通过拖拽案例,实现"跟随鼠标.边界限定.轨迹回放"三大效果: 完整代码中有详尽注释,故不再进行细致讲解: 对于案例中需要注意的重点或易错点问题,会总结在最后. 效果图(仅演示左 ...
- 鼠标划过用户名时在鼠标右下角显示div展示用户资料
最近做一个网站论坛,为了方便会员之间相互了解,又不想再做一个页面展示用户资料,就想到了鼠标划过用户名时在鼠标右下角显示div展示用户资料这个效果, 这里要注意的该方法不是给每个用户名的旁边都绑定一个d ...
- html5跟随鼠标炫酷网站引导页动画特效
html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...
随机推荐
- pahlcon:cookies设置
非加密方式(简单,但不推荐) 步骤 1 在全局容器中加入Cookie: $di->set('cookies', function () { $cookies = new \Phalcon\Htt ...
- Java循环结构 - for, while 及 do...while
Java循环结构 - for, while 及 do...while 顺序结构的程序语句只能被执行一次.如果您想要同样的操作执行多次,,就需要使用循环结构. Java中有三种主要的循环结构: whil ...
- VS2017 MVC项目,新建控制器提示未能加载文件或程序集“Dapper.Contrib解决方法
VS2017中MVC项目中,右键新建控制器时,提示 未能加载文件或程序集“Dapper.Contrib, Version=1.50.0.0, Culture=neutral, PublicKeyTok ...
- 【BZOJ3597】方伯伯运椰子(分数规划,网络流)
[BZOJ3597]方伯伯运椰子(分数规划,网络流) 题解 给定了一个满流的费用流模型 如果要修改一条边,那么就必须满足流量平衡 也就是会修改一条某两点之间的路径上的所有边 同时还有另外一条路径会进行 ...
- 二十四 Python分布式爬虫打造搜索引擎Scrapy精讲—爬虫和反爬的对抗过程以及策略—scrapy架构源码分析图
1.基本概念 2.反爬虫的目的 3.爬虫和反爬的对抗过程以及策略 scrapy架构源码分析图
- Java 连接操作 Redis 出现错误
Exception in thread "main" redis.clients.jedis.exceptions.JedisConnectionException: java.n ...
- 重温MVC基础入门
重温MVC基础入门 简介 本文主要是作者回顾MVC基础的文章,整合个人认为基础且重点的信息,通过简单实践进行复习. 相关代码地址:https://github.com/OtherRuan/Revi ...
- Prism 4 文档 ---第9章 松耦合组件之间通信
当构建一个大而负责的应用程序时,通用的做法时将功能拆分到离散的模块程序集中.将模块之间的静态引用最小化.这使得模块可以被独立的开发,测试,部署和升级,以及它迫使松散耦合的沟通. 当在模块之间通信时,你 ...
- 最大匹配算法 (Maximum Matching)
之所以研究这个算法,是因为最近在研究NLP中文的分词,所谓分词就是将一个完整的句子,例如“计算语言学课程有意思”,分解成一些词组单元“计算语言学,课程,有,意思”. “最大匹配法” 在中文分词中有所应 ...
- CMDB开发(需求分析)
浅谈ITIL TIL即IT基础架构库(Information Technology Infrastructure Library, ITIL,信息技术基础架构库)由英国政府部门CCTA(Central ...