【案例】DIV随鼠标移动而移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div跟随鼠标移动而移动</title>
<style>
*{
margin: 0;
padding: 0;
}
#ball{
width: 200px;
height: 200px;
border-radius: 50%;
background: pink;
position: absolute;
cursor: move;
}
</style>
</head>
<body>
<div id="ball"></div>
</body>
<script>
//获取元素
var ball = document.getElementById('ball');
console.log(ball);
//将鼠标的移动事件交给外部更大的容器window,以保证鼠标不丢失
/*ball.onmousemove = function(e){}*/
window.onmousemove = function(e){
var e = e || window.event;
var newLeft = e.clientX - ball.offsetWidth / 2;
var newTop = e.clientY - ball.offsetHeight / 2;
ball.style.left = newLeft + 'px';
ball.style.top = newTop + 'px';
}
</script>
</html>
【案例】DIV随鼠标移动而移动的更多相关文章
- 如何用jQuery实现div随鼠标移动而移动（详解）？----2017-05-12
重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...
- 经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...
- div跟随鼠标移动
1.目标是实现div跟随鼠标而移动,分三种情况进行实现 a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能 第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法. 1)获取鼠 ...
- 一组div跟随鼠标移动，反应鼠标轨迹
<!DOCTYPE html> <html> <head> <title>div随鼠标移动</title> <style type=& ...
- 如何用jQuery实现div随鼠标移动而移动？（详解）----2017-05-12
重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...
- Jquery的鼠标移动上去显示div，鼠标离开的时候隐藏div效果
有时候我们需要这个效果:当鼠标放上去的时候显示一个div,当鼠标移走的时候就将div隐藏了.代码如下,记得引入Jquyer库.(当鼠标移动到id=menu的div上的时候,显示id=list的div, ...
- 【学习笔记01】:hover为DIV添加鼠标悬停时改变颜色的效果
:hover所有主流浏览器都支持(IE6.0以下支持不好,以后再学习用Javascript来实现悬停效果) 这是一个绿色底白色Icon的搜索按钮
- html js div随鼠标移动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery实际案例⑥——图片跟随鼠标、五角星评分案例
一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距 ...
随机推荐
- vmware压缩磁盘空间的方法, linux怎么卸载vmware
家里笔记本40G,可用空间怎么挤都只剩7G,从单位copy回来的linux虚拟机要10G,经检查实际使用空间5.7,也就是其他都是空余空间,可以释放掉.(只适合independent.Persiste ...
- C++之STL（标准模板库）
STL:standard Template Lib 一.vector <1> 特点 <2> 常用函数: <3> 遍历方法: 1.for循环 2.迭代器 <4& ...
- Devexpress ProgressBarControl的使用
1 private void simpleButton1_Click(object sender, EventArgs e) 3 { 4 //设置一个最小值 5 progressBarControl1 ...
- jquery中typeof的用法
typeof 可以用来检测给定变量的数据类型,可能的返回值: 'undefined' 'boolean' 'string' 'number' 'object' 'function' var hahah ...
- QTableWidget学习
一.这次项目需要用到,可以在tablewidget中添加item,并且可以通过鼠标的右键选项进行一些打开.删除等操作. 1.在构造函数中定制右键菜单选项 ui.tableWidget_2->se ...
- Nginx软件模块说明
Nginx软件模块说明 Nginx常用模块 注:以下只是列举Nginx常用模块,需要详细了解更多模块可以登录Nginx官方网站查看 功能模块 模块说明 ngx_http_core_module 包含一 ...
- 2019-8-31-dotnet-判断程序当前使用管理员运行降低权使用普通权限运行
title author date CreateTime categories dotnet 判断程序当前使用管理员运行降低权使用普通权限运行 lindexi 2019-08-31 16:55:58 ...
- mac NTFS 关于错误-36，rm Input/output error
当传输文件时出现Mac错误代码36 当我向一个U盘或存储卡里传输文件时,出现了Mac Error Code36,我该如何解决? Mac,传输文件,错误代码36,U盘,卡片 Mac OS X Snow ...
- SQL SERVER 2008R2 执行大脚本文件时，提示“内存不足”的解决办法
我把一个数据库的架构及数据都已脚本的方式拷贝下来,再去新建一个数据库想把脚本执行一下,但提示如下错误: 问题描述: 当客户服务器不允许直接备份时,往往通过导出数据库脚本的方式来部署-还原数据库, 但是 ...
- 0910CSP-S模拟测试赛后总结
%%%外校参加国赛大佬kai神-rank1 ---------------以上选手实力开挂---------------- %%%skyh.NC锅-rank2 %%%神牛170-rank4 %%%迪哥 ...