不说话,直接上代码。

css:

  1. #createGoDivBox{
  2. display: none;
  3. }
  4. #createGoDivBox div{
  5. background-color: #00A6C2;
  6. position: absolute;
  7. border-radius: 50%;
  8. }

js:

  1. init();
  2. function init(){
  3. // 获取body
  4. var parBox = document.body || document.getElementsByTagName('body')[0];
  5. // 创建div
  6. var createGoDivBox=document.createElement("div");
  7. // 子盒子数量
  8. var divNum=10;
  9. // 添加ID
  10. createGoDivBox.setAttribute("id","createGoDivBox");
  11. // 插入body中
  12. parBox.appendChild(createGoDivBox);
  13. // 创建子盒子
  14. addElementDiv(createGoDivBox,divNum);
  15. // 添加事件
  16. bindEvent(createGoDivBox,divNum);
  17. }
  18. function addElementDiv(parent,createNum) { // 创建子盒子
  19.     var div;
  20. for(var i = createNum;i>0;i--){
  21. div = document.createElement("div");
  22. div.style.width = i+"px";
  23. div.style.height = i+"px";
  24. parent.appendChild(div);
  25. }     
  26.   }
  27. function bindEvent(createGoDivBox,divNum){ // 添加事件
  28. var divs = createGoDivBox.getElementsByTagName('div');
  29. document.onmousemove = function(event){
  30. createGoDivBox.style.display ="block";
  31. divs[0].style.left = event.clientX-divNum/2 + "px";
  32. divs[0].style.top = event.clientY-divNum/2 + "px";
  33. for (var i = divs.length-1;i>0;i--) {
  34. divs[i].style.left = divs[i-1].style.left;
  35. divs[i].style.top = divs[i-1].style.top;
  36. }
  37. }
  38. }

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

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. UIScrollView无法滚动的解决办法

    如果UIScrollView无法滚动,可能是以下原因: 没有设置contentSize scrollEnabled = NO 没有接收到触摸事件:userInteractionEnabled = NO ...

  2. C# 使用Silverlight toolkit Chart

    一.基础介绍 Silverlight ToolKit是微软发布的基于Microsoft-Public License(MS-PL)许可协议的控件集.MS-PL许可协议允许商业或非商业的发布,所以我们可 ...

  3. C#高级编程笔记 2016年10月8日运算符和类型强制转换

    1.checked和unchecked 运算符 C#提供了checked 和uncheckde 运算符.如果把一个代码块标记为checked, CLR就会执行溢出检查,如果发生溢出,就抛出overfl ...

  4. Python日志logging

    logging 用于便捷记录日志且线程安全的模块 1.单文件日志 import logging logging.basicConfig(filename='log.log', format='%(as ...

  5. linux安装wine

    1.添加PPA sudo add-apt-repository ppa:ubuntu-wine/ppa 2.更新列表 sudo apt-get update 3.安装Wine sudo apt-get ...

  6. virtualbox

    下载安装:http://wiki.centos.org/zh/HowTos/Virtualization/VirtualBox

  7. .NET LINQ 限定符操作

    限定符操作      限定符运算返回一个 Boolean 值,该值指示序列中是否有一些元素满足条件或是否所有元素都满足条件. 方法 方法名 说明 C# 查询表达式语法 Visual Basic 查询表 ...

  8. 14. Longest Common Prefix

    题目: Write a function to find the longest common prefix string amongst an array of strings. Subscribe ...

  9. 原生js完成拼图小游戏

    废话不说,看代码,图片可以自己找,我这直接引用了百度的了 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml ...

  10. service 03 iis之服务器无访问权限

    这两天在Service 03 的iis 6.0 里面配置一个aspx 的网站 ,总是遇到一个问题  401.2   无权限访问,于是去百度了一下好多的方法,基本上是关于设置匿名用户,打开IUSER用户 ...