【案例】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){ }); //此时可以获取鼠标距 ...
随机推荐
- NX二次开发-UFUN由工程图视图tag获取图纸页tag UF_DRAW_ask_drawing_of_view
#include <uf.h> #include <uf_draw.h> #include <uf_drf.h> #include <uf_obj.h> ...
- NX二次开发-NXOPEN更改工程图视图名字baseView1->SetName("LSY");
NX9+VS2012 #include <uf.h> #include <uf_draw.h> #include <uf_obj.h> #include <u ...
- 让nginx支持patchinfo，（支持codeigniter，thinkphp，ZF等框架）
nginx 的config配置: server { listen ; server_name xxx; ....if (!-e $request_filename) { rewrite ^/(.*)$ ...
- [NOI.AC] candy
题意:求净利益. 思路: 其实我也不怎么懂题面. 不过这种题一般来说就是从最大的开始选. 所以考虑贪心. 那么代价如何处理呢?? 我们考虑两个序列同时选数,把代价每次记录到一个序列的和上,那么对于两次 ...
- 执行SQL语句---SELECT
1.通常从MySQL数据库中检索数据有4个步骤: (1)发出查询: 用mysql_query发出查询. (2)检索数据: 用mysql_store_result/mysql_use_result (3 ...
- 第37讲 谈谈Spring Bean的生命周期和作用域
在企业应用软件开发中,Java 是毫无争议的主流语言,开放的 Java EE 规范和强大的开源框架功不可没,其中 Spring 毫无疑问已经成为企业软件开发的事实标准之一.今天这一讲,我将补充 Spr ...
- 修改input标签placeholder文字颜色
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit browsers */ color: ...
- docker使用gitlab持续集成(1)
修改ssh连接端口vi /etc/ssh/sshd_config 写docker-compose.yml文件配置gitlab version: '3' services: gitlab: image: ...
- iOS开发系列-自动化分发测试打包
概述 项目在测试阶段需要频繁打包给测试人员,对于这些固定化的操作我们可以使用自动化的手段去解决,将时间放在有意义的事情上. xcodebuild 是苹果发布自动构建的工具. Shell脚本打包 xcr ...
- mysql的几种启动方式
mysql的四种启动方式: 1.mysqld 启动mysql服务器:./mysqld --defaults-file=/etc/my.cnf --user=root 客户端连接: mysql --de ...