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;
        }
    }
}

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

时间: 2024-10-25 22:05:24

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

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

元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中,下面是完整的Demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标区域</title> <style type="text/css"> *{margin:0;padding:0;} .area{ width:

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

1,显示效果: 2,html结构 1 <div class="process_list-lpu"> 2 <div class="process_line"></div> 3 <div class="content_list"> 4 <ul> 5 <li><a href="javascipt:;">End customer get product

javascript 跟随鼠标移动的提示框的一个小demo

下面提供一种跟随鼠标移动的提示框的思路,方便在以后工作中应用,主要是应用到鼠标移动产生的数值来进行移动提示框的定位... CSS代码   .box{height:100px;width:100px;background:orange;position:relative;margin:40px;} .move{height:20px;width:20px;background:red;position:absolute;left:0px;top:0px;display:none;} HTML代码

网站导航标题栏下面有一小色块跟随鼠标移动特效

可能很多人看标题不是很明白这个特效,下面简述一下这个特效: 看到很多网站上的导航栏下面有一个小的色块,一开始小色块是处在第一个标题下面的,当鼠标移动到另一个标题时,这个小色块就会悠悠地跑到对应的标题下面. 这里截图只能看到色块是移动了,但显示不出色块是从Home下面平滑移动到Product下面的.反正就是这个意思了.大家看我上面的解释就知道了,不行看下面代码或者把代码拷贝运行一下就看到效果了 这个特效很好玩,正好朋友写了这方面的特效代码,我拿过来看了下,这才发现其实很简单,就是几个jquery封

JavaScript总结之鼠标划过弹出div单击出现对话框

为了满足他们的永无止境的要求,我可谓是任劳任怨啊,累断了双手,看瞎了双眼.这个是来写鼠标划过一个按钮,然后弹出一个小提示框解释,另外根据radio是否选中,判断点击后如何执行,然后执行之后再有一个确认或取消.其实部分想要的功能可以从中截取. js代码: 1 <script type="text/javascript"> 2 function sAlert_jobdel(str){ 3 var msgw,msgh,bordercolor; 4 msgw=400;//提示窗口的

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

html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/texiao/html5/ 效果图: 以下是源代码: 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Co

阻止右键菜单(阻止默认事件)&amp;&amp;跟随鼠标移动(大图展示)&amp;&amp;自定义右键菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

鼠标悬浮弹出跟随鼠标移动的带箭头的信息层

鼠标悬浮弹出跟随鼠标移动的带箭头的信息层:很多网站,当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层,并且此层能够跟随鼠标移动,同时弹出的层带有箭头,此箭头指向鼠标悬浮的元素,下面就通过实例代码简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

JS跟随鼠标旋转的图片

<html> <head> <title>JS跟随鼠标旋转的图片丨Daniel wellington</title> <script> <!-- Beginning of JavaScript - var x,y var step=5 var flag=1 var pause var timersmall var timerbig var isbigcircle=1 var pause=50 var bigradius var smallr