javascript创建跟随鼠标好玩的东西
不说话,直接上代码。
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创建跟随鼠标好玩的东西的更多相关文章
- javascript元素跟随鼠标在指定区域运动
元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中,下面是完整的Demo: <!DOCTYPE html> <html lang="en"> <h ...
- 完整的html+css+javascript实现跟随鼠标移动显示选中效果
1,显示效果: 2,html结构 <div class="process_list-lpu"> <div class="process_line&quo ...
- javascript div跟随鼠标移动
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- Javascript之盒子拖拽(跟随鼠标、边界限定、轨迹回放)
本文通过拖拽案例,实现"跟随鼠标.边界限定.轨迹回放"三大效果: 完整代码中有详尽注释,故不再进行细致讲解: 对于案例中需要注意的重点或易错点问题,会总结在最后. 效果图(仅演示左 ...
- C# PDF Page操作——设置页面切换按钮 C# 添加、读取Word脚注尾注 C#为什么不能像C/C++一样的支持函数只读传参 web 给大家分享一个好玩的东西,也许你那块就用的到
C# PDF Page操作——设置页面切换按钮 概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者 ...
- 用html5的canvas和JavaScript创建一个绘图程序
本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...
- html5跟随鼠标炫酷网站引导页动画特效
html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...
- JS打造的跟随鼠标移动的酷炫拓扑图案
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【翻译】使用CSS3和jQuery制作跟随鼠标方位的Hover特效
今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果.当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑 ...
随机推荐
- PHP系统声明式事务处理
转自:http://www.jianshu.com/p/34261804bc45 1.数据库事务 事务(Transaction)是并发控制的基本单位.所谓的事务,它是一个操作序列,这些操作要么都执行, ...
- 认识VTK工作原理
VTk通过数据流实现变信息为图形数据的. 数据流一般为:source-filter--mapper--actor--render--renderwindow--interactor. 要理解工作原理, ...
- 快速傅里叶(FFT)的快速深度思考
关于按时间抽取快速傅里叶(FFT)的快速理论深度思考 对于FFT基本理论参考维基百科或百度百科. 首先谈谈FFT的快速何来?大家都知道FFT是对DFT的改进变换而来,那么它究竟怎样改进,它改进的思想在 ...
- mysql安装配置
MySQL 是最流行的关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL所使用的SQL语言是用于访问数据库的最常用标准化语言. MySQL由于其体积小.速度快 ...
- PHP exec/system启动windows应用程序,执行.bat批处理,执行cmd命令
exec 或者 system 都可以调用cmd 的命令 直接上代码: <?php /** 打开windows的计算器 */ exec('start C:WindowsSystem32calc.e ...
- Linux C fcntl()函数详解
fcntl系统调用 功能描述:根据文件描述词来操作文件的特性. 用法: int fcntl(int fd, int cmd); int fcntl(int fd, int cmd, long arg ...
- Linux下提示 bash: xxx command not found
今天在虚拟机上安装了CentOS5.5,发现运行一些很正常的诸如:init,shutdown,fdisk 等命令时,悍然提示: bash: xxx command not found. 那么,首先就要 ...
- 设计模式--5.5 代理模式-通用代码及aop
1.通用代码 (1)Subjects package com.design.代理模式.通用代码; public interface Subject { void request(); } (2)Rea ...
- 修改mysql默认字符编码出现的Job failed to start解决方法
5.5以后的版本对字符编码方式修改的办法,原来在[mysqld]下的修改已经发生了变化,正确方式如下: [mysqld]下添加的应该为: character-set-server=utf8 colla ...
- 「转」xtrabackup新版详细说明
声明:本文由我的同事@fiona514编写,是我看过的最用心的中文说明介绍,强烈推荐大家学习使用. Percona Xtrabackup 2.4.1 编译及软件依赖 centos5,6 需要升级cma ...