div跟随鼠标移动
1、目标是实现div跟随鼠标而移动,分三种情况进行实现
a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能
第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法。
1)获取鼠标的坐标,进行给div坐标赋值,实现如下:
var left = event.clientX;
var top = event.clientY;
box1.style.left = left + "px";
box1.style.top = top +"px";
第二种方式,假如body的高度大于可见高度,则会出现滚动条,clientXY获取的是可见的大小,则多余的部分则无法实现移动,则需要使用下面的方式实现
但是这种方式不兼容IE8,所以如果要兼容IE8,则不能使用。pageX是获取整个页面的大小
var left = event.pageX;
var top = event.pageY;
第三种方式是什么都可以兼容的,涵盖上面两种方式的可行度,就是用可见窗口的加上滚动条的高度即可
var st = document.body.scrollTop || document.documentElement.scrollTop;
var left = event.clientX;
var top = event.clientY;
box1.style.left = left + "px";
box1.style.top = top + st+"px";
注,left轴也一样,我这里只是实现了y轴
div跟随鼠标移动的更多相关文章
- 一组div跟随鼠标移动,反应鼠标轨迹
<!DOCTYPE html> <html> <head> <title>div随鼠标移动</title> <style type=& ...
- javascript 一串DIV跟随鼠标移动
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- javascript div跟随鼠标移动
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 鼠标拖动div,div跟随鼠标移动效果
<div id="boxDiv" style='width:20px;height:20px;position:absolute;background:red;'> ...
- js 实现div跟随鼠标移动
今天看到了一个自己可以随心所欲的拖到div到页面的任意位置.感觉挺好的,就心血来潮的查询了一下,看看网友做的 代码如下: <script>function doit(){ var obj ...
- jquery对div元素进行鼠标移动(稍稍修改下可以实现div跟随鼠标)
/* 网上找了资料都是对于event.clientX和offset().left进行了计算,但是去掉了这个计算方式,直接使用当前坐标也一样,效果都一样不太好 strHeader:标题 jquery定位 ...
- 【案例】DIV随鼠标移动而移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 一款基于TweenMax跟随鼠标单击移动的div
今天给大家分享一款基于TweenMax跟随鼠标单击移动的div.在这款实例中你可以单击任意位置,div会移动到你单击的位置.效果图如下: 在线预览 源码下载 实现的代码. html代码: < ...
- html页面设置一个跟随鼠标移动的DIV(jQuery实现)
说明业务:鼠标放到某个标签上,显示一个div,并跟随鼠标移动 html页面(直接放body里面): <a href="#" id="'+data[i].refund ...
随机推荐
- hadoop排序 -- 全排序
目录 一.关于Reducer全排序 1.1. 什么叫全排序 1.2. 分区的标准是什么 二.全排序的三种方式 2.1. 一个Reducer 2.2. 自定义分区函数 2.3. 采样 一.关于Reduc ...
- VCC、VDD、VSS以及VBAT的区别
在STM32 的学习中,发现有几种看起来相关的名称,分别是VCC.VDD.VSS.VBAT,在经过搜索查找之后,总结如下: 1.VCC的C是Circuit的意思,是指整个供电回路的电压, 也有人说VC ...
- git——本地项目上传到git
1.对于github相信大家写自动化代码的人都不陌生,而且这也可以说是你进军自动化的一项必须解锁的技能,今天抽空开始整理笔记,顺便整理下github的基本使用,从本地上传代码托管: 一.从无到有:先注 ...
- A1048
给n个正整数,再给一个m,如果n个数中存在a+b=m(a<=b),则输出a,b. 如果有两组以上,则输出a最小的一组. #include<cstdio> #include<al ...
- Golang 对接宝付、通联、富友金账户...填坑记
一.宝付私钥加密,公钥解密 由于对RSA加密解密原理不是很熟悉,宝付也没有Golang的Demo提供.Go语言库里一般都是私钥解密.公钥加密,或者私钥签名.公钥验签.宝付需要反过来,这里也到好找到了h ...
- Flex copy and paste
<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx ...
- SSM框架及例子(转)
SSM 手把手教你整合最优雅SSM框架:SpringMVC + Spring + MyBatis 博客地址:http://blog.csdn.net/qq598535550/article/detai ...
- [arc067F]Yakiniku Restaurants[矩阵差分]
Description 传送门 Solution 假如我们确定了烧烤店区间[l,r],则票j必定会选择在B[i][j](l<=i<=r)最大的烧烤店使用. 反过来想,我们想要票j在第i个烧 ...
- 优步UBER司机全国各地奖励政策汇总:北京、上海、广州、深圳、佛山、天津、南京、武汉、成都、重庆、济南、西安、宁波、青岛、长沙、苏州
Uber当周奖励政策 当前奖励包括:高峰翻倍奖励.行程奖励.金牌司机奖励 获得任何奖励的前提条件: 当周评分高于4.7分,当周成单率高于45%,且当周完成至少5单(含5单) 滴滴快车单单2.5倍,注册 ...
- Elasticsearch5.x版本中对Text类型进行聚合时提示illegal_argument_exception
Having this field in my mapping "answer": { "type": "text", "fiel ...