不说话,直接上代码。

css:

#createGoDivBox{
display: none;
}
#createGoDivBox div{
background-color: #00A6C2;
position: absolute;
border-radius: 50%;
}

js:

init();
function init(){
// 获取body
var parBox = document.body || document.getElementsByTagName('body')[0];
// 创建div
var createGoDivBox=document.createElement("div");
// 子盒子数量
var divNum=10;
// 添加ID
createGoDivBox.setAttribute("id","createGoDivBox");
// 插入body中
parBox.appendChild(createGoDivBox);
// 创建子盒子
addElementDiv(createGoDivBox,divNum);
// 添加事件
bindEvent(createGoDivBox,divNum);
}
function addElementDiv(parent,createNum) { // 创建子盒子
    var div;
for(var i = createNum;i>0;i--){
div = document.createElement("div");
div.style.width = i+"px";
div.style.height = i+"px";
parent.appendChild(div);
}     
  }
function bindEvent(createGoDivBox,divNum){ // 添加事件
var divs = createGoDivBox.getElementsByTagName('div');
document.onmousemove = function(event){
createGoDivBox.style.display ="block";
divs[0].style.left = event.clientX-divNum/2 + "px";
divs[0].style.top = event.clientY-divNum/2 + "px";
for (var i = divs.length-1;i>0;i--) {
divs[i].style.left = divs[i-1].style.left;
divs[i].style.top = divs[i-1].style.top;
}
}
}

很好玩,如果添加到页面中或则也是一个不错的体验哈!!!!

javascript创建跟随鼠标好玩的东西的更多相关文章

  1. javascript元素跟随鼠标在指定区域运动

    元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中,下面是完整的Demo: <!DOCTYPE html> <html lang="en"> <h ...

  2. 完整的html+css+javascript实现跟随鼠标移动显示选中效果

    1,显示效果: 2,html结构 <div class="process_list-lpu"> <div class="process_line&quo ...

  3. javascript div跟随鼠标移动

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. Javascript之盒子拖拽(跟随鼠标、边界限定、轨迹回放)

    本文通过拖拽案例,实现"跟随鼠标.边界限定.轨迹回放"三大效果: 完整代码中有详尽注释,故不再进行细致讲解: 对于案例中需要注意的重点或易错点问题,会总结在最后. 效果图(仅演示左 ...

  5. C# PDF Page操作——设置页面切换按钮 C# 添加、读取Word脚注尾注 C#为什么不能像C/C++一样的支持函数只读传参 web 给大家分享一个好玩的东西,也许你那块就用的到

    C# PDF Page操作——设置页面切换按钮   概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者 ...

  6. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  7. html5跟随鼠标炫酷网站引导页动画特效

    html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...

  8. JS打造的跟随鼠标移动的酷炫拓扑图案

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 【翻译】使用CSS3和jQuery制作跟随鼠标方位的Hover特效

    今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果.当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑 ...

随机推荐

  1. 一个类似宣传的H5页面

    趁着闲置 做了一个H5的页面 感觉不错. 具体效果如下 框架上我选择 zepto(其实这个可有可无,推荐用原生的最好) FullPage (感觉挺好用的一个全屏滚动插件 ) pageResponse ...

  2. [译] 你该知道的javascript作用域 (javascript scope)(转)

    javascript有一些对于初学者甚至是有经验的开发者都难以理解的概念. 这个部分是针对那些听到 : 作用域, 闭包, this, 命名空间, 函数作用域, 函数作用域, 全局作用域, 变量作用域( ...

  3. 如何快速上手使用STM32库函数

    一.背景 如前文所述,利用标准库函数的好处在于,可以快速开发,不用去对着数据手册,小心翼翼的一位一位的配置那些繁复的寄存器,因为这些工作意法半导体已经找了一些顶级的工程师帮你做了,杰作既是其库函数.当 ...

  4. godaddy域名使用DNSPod做DNS解析图文教程

    考虑到很多朋友看到英文就很头痛,在godaddy解析域名也不怎么方便,我们需要把在godaddy注册的域名,使用国内的DNS服务器,全部都是免费的哦. 首先打开www.dnspod.cn  用自己的常 ...

  5. PHP简单 对象(object) 与 数组(array) 的转换

    数组是PHP的灵魂,非常强大,但有时候面向对象编程也是挺方便的,数组 与 对象 之间切换也是常有的事: /** * 数组 转 对象 * * @param array $arr 数组 * @return ...

  6. CentOS6.3编译安装Memcached的PHP客户端memcache

    在安装Memcached的PHP客户端memcache之前,可先看下先前的工作笔记: PHP5不重新编译,如何安装自带的未安装过的扩展,如soap扩展? 安装PHP的memcache扩展 cd /us ...

  7. C和指针 第九章 习题

    9.15 编写函数格式化金钱为标准字符串 #include <stdio.h> #include <string.h> #define TEMP_LEN 1000 void d ...

  8. 【Android自学日记】搭建Android开发环境

    搭建Android应用开发环境所需工具 1_> JDK(JAVA Development)推荐使用6.0以后版本 配置环境变量(以下是环境变量的具体内容及介绍) ================ ...

  9. 【Python基础学习二】定义变量、判断、循环、函数基本语法

    先来一个愉快的Hello World吧,就是这么简单,不需要写标点符号,但是需要严格按照缩进关系,Python变量的作用域是靠tab来控制的. print("Hello World" ...

  10. 关于int,integer初始值问题