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效果.当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑 ...
随机推荐
- 个性化设置phpMyAdmin,去掉“以树形显示数据库”,禁用“发送错误报告”
个性化设置phpMyAdmin 在使用phpMyAdmin 3.5.8.2时,发现: 如果数据库有相同的前缀,左边数据库导航会把前缀合并,即所谓的“以树形显示数据库”,真的有点不习惯,如下图所示: 不 ...
- PHP图片裁剪与缩放 / 无损裁剪图片
图片太大且规格不统一,显示的控制需要靠JavaScript来完成,用在移动设备上时显示效果不好且流量巨大,需要对现有图片库的图片进行一次处理,生成符合移动设备用的缩略图,将原来客户端JS做的工作转移到 ...
- 如何查看、修改Linux的系统时间
如题: 如何修改Linux的系统时间? date -s 05/27/2011 date -s 10:24:00 clock -w 就这三条命令就OK了! 查看/修改Linux时区和时间 一.时区 1. ...
- C和指针 第六章 数组名与指针
指针的算术运算符是指针和数组之间的一种关联,但不是唯一关联: 可以使用数组名作为指向数组第一个元素的指针,但是不可以给数组名赋新的值. //如下声明a int a[10]; //用a作为指向数组第一个 ...
- [BZOJ4408][Fjoi 2016]神秘数
[BZOJ4408][Fjoi 2016]神秘数 试题描述 一个可重复数字集合S的神秘数定义为最小的不能被S的子集的和表示的正整数.例如S={1,1,1,4,13},1 = 12 = 1+13 = 1 ...
- NVelocity介绍,NVelocity中文手册文档及实例下载
NVelocity是什么velocity英音:[vi'lɔsiti]美音:[və'lɑsətɪ]近在做一个项目,客户要求有网站模板功能,能够自主编辑网站的风格,因为这个系统是为政府部门做子站系统,举个 ...
- SQLite批量插入优化方法
SQLite的数据库本质上来讲就是一个磁盘上的文件,所以一切的数据库操作其实都会转化为对文件的操作,而频繁的文件操作将会是一个很好时的过程,会极大地影响数据库存取的速度. 例如:向数据库中插入10 ...
- errno.h
linux 中c语言使用errno.h头文件来记录错误信息以及定义返回错误代码的宏. strerror(errno)打印错误信息 1. warning: implicit declaration of ...
- node05-fs
目录:node01-创建服务器 node02-util node03-events node04-buffer node05-fs node06-path node07-http node08-exp ...
- 二、CoreAnimation之寄宿图详解
在之前的图层树中我们知道,可以使用CALayer对象创建一些有背景颜色的图层,其实使用CALayer,不仅可以利用其展示背景颜色,还可以展示图片.而这些展示内容,其实就是CALayer的寄宿图.这一节 ...