效果展示
这里鼠标指针没有录入到图片中,而且帧数有限制,实际效果会很丝滑的
一、主要逻辑和思路
首先,鼠标拖影效果,就是四五个小球跟着鼠标位置的移动而移动。
这里,我们要先试着让一个小球跟着鼠标动起来。
这里小球的样式大家可以随意设置,但千万别忘了设置 position: absolute;因为要用到left和top来让小球移动位置
监听window的鼠标移动事件 , 这里你用onmousemove绑定事件也可以。
window.addEventListener( 'mousemove',function(event){
var xp = event.clientX // 获取事件对象中,鼠标的X轴位置
var yp = event.clientY // 获取事件对象中,鼠标的轴位置
// 这两个方法,大家可以用console.log()看一看,方便理解后面的逻辑
最后再把这两个变量,用来更改你的小球left和top的值就可以了
div.style.left = e.clientX+'px';
div.style.top = e.clientY+'px';
div是你的小球dom对象,记得更换,同时也别忘了再数值后面加上px
,false )
如果大家跟着我的逻辑,让自己的小球可以跟随鼠标动起来了,那么你就成功一半了,接下来,就是多做几个小球,然后让后面几个小球延时跟着鼠标移动,这样鼠标拖影效果也就完成了!
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
var divs = document.querySelectorAll('div');
//工具函数,接收两个参数,e是事件对象,i则是小球的索引
function pos(e,i){
divs[i].style.left = e.clientX+'px';
divs[i].style.top = e.clientY+'px';
}
//调用函数
function move(e){
pos(e,0)
setTimeout( function(){
pos(e,1)
setTimeout( function(){
pos(e,2)
setTimeout( function(){
pos(e,3)
setTimeout( function(){
pos(e,4)
},30 )
},30 )
},30 )
},30 )
}
window.addEventListener( 'mousemove',move,false )
//最后,把调用函数绑定到window的鼠标移动事件上
主要逻辑就是,通过一次性计时器的嵌套,来实现延迟触发工具函数,从而实现鼠标拖影效果
二、代码实现
完整代码放下面了,里面还有随机颜色,和大小不断变化的效果,这里暂不过多讲解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: black;
}
div{
width: 50px;
height: 50px;
position: absolute;
background-color: red;
box-shadow: 0 0 10px 0 red;
border-radius: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
<script>
window.addEventListener( 'mousemove',move,false )
var divs = document.querySelectorAll('div');
var color = [4,5,6,7,8,9,'a','b','c','d','e','f']
var sss = null;
function colo(){
var hexcolor = '';
while (hexcolor.length<6) {
var HEXindex = Math.floor( Math.random()*color.length );
if( hexcolor.indexOf( color[HEXindex] ) === -1 ){
hexcolor += color[HEXindex];
}
sss = hexcolor;
}
}
colo();
setInterval(colo,500)
function move(e){
pos(e,0)
setTimeout( function(){
pos(e,1)
setTimeout( function(){
pos(e,2)
setTimeout( function(){
pos(e,3)
setTimeout( function(){
pos(e,4)
},30 )
},30 )
},30 )
},30 )
}
function pos(e,i){
divs[i].style.left = e.clientX+'px';
divs[i].style.top = e.clientY+'px';
divs[i].style.background = "#"+sss;
divs[i].style.boxShadow = "0 0 100px 0 #"+sss;
}
var xxx = 50;
var u = true;
function ooo(){
if( xxx>=200 ){
u = false;
}
if( xxx<=30 ){
u = true;
}
if( u ){
xxx+=2;
}else{
xxx-=2;
}
for( var i = 0; i < divs.length; i++ ){
divs[i].style.width = xxx+'px'
divs[i].style.height = xxx+'px'
}
}
setInterval(ooo,20)
总结
鼠标拖影效果,代码特别简单,希望这篇简单的文章,能给你带来思路上的灵感。