JavaScript实现心形div块跟随鼠标移动(幻影效果)

上篇博客讲解了怎样利用JavaScript实现一串div块跟随鼠标指针移动，然后有轩辕问我，想给女朋友做一个好看的可不可以。现在我们来实现一串心形的div实现跟随鼠标的效果。如图：

HTML代码:

    <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>

CSS代码：

        *{margin: 0;padding: 0;}.box:nth-of-type(n){width: 10px;height: 10px;background: red;border-radius: 50%;;position: absolute;}.box:nth-of-type(n):after{display: block;width: 10px;height: 10px;background: red;border-radius: 50%;position: absolute;left: 6px;content: "";}.box:nth-of-type(n):before{display: block;width: 10px;height: 10px;background: red;transform: rotate(45deg);position: absolute;left: 3px;top: 3px;content: "";}.box:nth-of-type(2n){width: 10px;height: 10px;background: yellow;border-radius: 50%;;position: absolute;}.box:nth-of-type(2n):after{display: block;width: 10px;height: 10px;background: yellow;border-radius: 50%;position: absolute;left: 6px;content: "";}.box:nth-of-type(2n):before{display: block;width: 10px;height: 10px;background: yellow;transform: rotate(45deg);position: absolute;left: 3px;top: 3px;content: "";}.box:nth-of-type(3n){width: 10px;height: 10px;background: skyblue;border-radius: 50%;;position: absolute;}.box:nth-of-type(3n):after{display: block;width: 10px;height: 10px;background: skyblue;border-radius: 50%;position: absolute;left: 6px;content: "";}.box:nth-of-type(3n):before{display: block;width: 10px;height: 10px;background: skyblue;transform: rotate(45deg);position: absolute;left: 3px;top: 3px;content: "";}.box:nth-of-type(4n){width: 10px;height: 10px;background: green;border-radius: 50%;;position: absolute;}.box:nth-of-type(4n):after{display: block;width: 10px;height: 10px;background: green;border-radius: 50%;position: absolute;left: 6px;content: "";}.box:nth-of-type(4n):before{display: block;width: 10px;height: 10px;background: green;transform: rotate(45deg);position: absolute;left: 3px;top: 3px;content: "";}.box:nth-of-type(5n){width: 10px;height: 10px;background: pink;border-radius: 50%;;position: absolute;}.box:nth-of-type(5n):after{display: block;width: 10px;height: 10px;background: pink;border-radius: 50%;position: absolute;left: 6px;content: "";}.box:nth-of-type(5n):before{display: block;width: 10px;height: 10px;background: pink;transform: rotate(45deg);position: absolute;left: 3px;top: 3px;content: "";}

JS代码：

    var aBox = document.getElementsByClassName("box");var timer;document.onmousemove = function (ev) {clearInterval(timer);var ev = ev || window.event;// 设置一个div块跟随鼠标移动aBox[0].style.top = ev.pageY + "px";aBox[0].style.left = ev.pageX + "px";for (var i = aBox.length - 1; i > 0; i--) {aBox[i].style.top = aBox[i - 1].style.top;aBox[i].style.left = aBox[i - 1].style.left;}timer=setInterval(function () {for (var i = aBox.length - 1; i > 0; i--) {aBox[i].style.top = aBox[i - 1].style.top;aBox[i].style.left = aBox[i - 1].style.left;}},100)}

关注我，学习前端不迷路！！！

JavaScript实现心形div块跟随鼠标移动(幻影效果)相关推荐

DIV层跟随鼠标位置显示提示
虽然IE也带提示功能,只要给title属性赋值,如下代码 <a href="http://chenxp2032.blog.163.com/blog/#" title=&quo ...
P5.js之数组使用——绘制水墨画笔，实现跟随鼠标移动的效果
数组实践首先需要说明,p5和processing数组的使用有所不同数组的声明和初始化为: var pox =new Array(50); var poy=new Array(50); 实现思路: ...
使用css设置div块实现阴影呈现3d效果
最近闲来无聊,突然想着,自己在项目中,有的时候会需要一些稍微炫酷点的界面实现,然后当时也都是为了把效果实现,然后也没有认真的去研究学习,所以很多时候都是这个任务完成了,也就完成了.没有把相应的知识点给 ...
JavaScript实现一串div跟随鼠标移动效果（幻影效果）
JavaScript实现一串div跟随鼠标移动效果上一篇博文我们说到了利用JavaScript实现div块跟随鼠标移动的效果.现在来讲一个进阶版,实现一串div跟随鼠标移动效果,鼠标幻影效果.如图: ...
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
JavaScript画漂亮的心形图案
谁说程序员不懂浪漫,满屏跳动的心形图案送给你,先看效果: JavaScript代码如下: <!DOCTYPE html> <html> <head> <tit ...
圆点自动跟随鼠标移动
<canvas>绘制思路:在画布上绘制一个圆点,在移动鼠标时用背景图覆盖上一次的图片,然后再在这张背景图上绘制一个原点,利用定时器每隔10ms进行一次刷新<!doctype html ...
鼠标跟随案例：用js实现盒子跟随鼠标移动
需求:当我们鼠标放在div身上时,它的孩子p标签能够显示,而且跟着鼠标一起移动, 思路: ● 想让p标签跟着鼠标一起移动:运用鼠标移动事件,还需要p标签定位:(mousemove:鼠标移动事件) ● ...
Unity让物体跟随鼠标移动
前言最近在学习Unity,记录下学习的成果吧.本文最终结果是要实现一个小飞机跟随鼠标移动的效果.看下图片. 向量在Unity中,每个对象都有自己的位置属性,组件叫做Transform,通过Tran ...

JavaScript实现心形div块跟随鼠标移动(幻影效果)

JavaScript实现心形div块跟随鼠标移动(幻影效果)

JavaScript实现心形div块跟随鼠标移动(幻影效果)相关推荐

最新文章

热门文章