文档章节

javascript div跟随鼠标移动

激烈的海胆
 激烈的海胆
发布于 2016/06/08 16:59
字数 112
阅读 36
收藏 0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background-color:darkseagreen;
            border-radius: 20px;
            position: absolute;
        }
    </style>
    <script>
        window.onload=function(){

            var oDiv = document.getElementById("div1");
            var i = 0;
            document.onmousemove=function(ev){
                var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                var ev = ev||event;
                oDiv.style.left = ev.clientX + 'px';
                oDiv.style.top = ev.clientY + scrollTop +'px';
            }
        }
    </script>
</head>
<body>
    <div id="div1">

    </div>
</body>
</html>

绿色的div会跟随鼠标移动,并且不受滚动条的影响

© 著作权归作者所有

激烈的海胆
粉丝 0
博文 25
码字总数 7600
作品 0
北京
前端工程师
私信 提问
不可思议的纯 CSS 实现鼠标跟随效果

直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为。而鼠标跟随这种效果属于行为,要实现通常...

chokcoco
03/06
0
0
10 个jQuery/JavaScript的圣诞主题效果

圣诞节快到了,赶快为你的网站打扮一番,换上节日的盛装吧!本文为你整理了10款使用jQuery和 JavaScript打造的圣诞主题效果,希望能给你带来些许惊喜。(PS:经过小编测试,下面的部分效果仅...

开心303
2011/12/13
2.5K
8
怎么样设置可以使html的焦点不能获取?

最近做一个animation 动画,我鼠标移动到div中js函数运行,但是div里面有一个h1,有的时候鼠标在h1上就会导致js失效,现在想设置一个属性使h1的焦点不被获取,有没有办法解决呢?...

linzhifen5
2018/08/10
365
1
Zero Clipboard-js复制到剪切板(支持多浏览器)

在前端开发中经常会遇到这样的问题,要求用js将输入框或者div中的内容复制到剪切板。在ie下可以通过clipboardData.setData来实现,但是这个方法却不能兼容其他的浏览器。显然这种方法在这个浏...

mickelfeng
2014/01/22
305
0
jquey学习篇 第一篇

query 选择器大集合,直接上代码: 1 类选择器 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""><html><head><meta http-equiv="Content-Type" content="text/html; char......

drag
2015/11/13
38
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
今天
4
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
今天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
今天
4
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
今天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部