两个圆圈应该跟随光标 - 一个小和一个大（延迟） [英] two circles should follow the cursor – one small and one big (with delay)

问题描述

我现在在一些网站上看到了这种趋势，其中默认的游标被替换为新的游标 - 在许多情况下圈

这些游标是交互式的 - 具有交互性我的意思是，当悬停a标签时，它会改变尺寸和颜色。在本网站上： https://en.leviev-group.com/ 你可以看到我想要的游标效果。

我试图制作一支笔，但它不能正常工作： https://codepen.io/anon/pen/VQwdBv?q=cursor&limit=all&type=type-pens

 < div id =cursor> 
< div id =circle-big>< / div> 
< div id =circle>< / div> 
< / div> 
  

我想让中间的圆圈成为光标和围绕光标的大圆圈延迟。
当悬停标签时，它应该围绕a标签，类似于网站上的示例。如果可能的话用javascript和css制作

这可能如何？

解决方案

你几乎是好的，只是让两个元素的行为相同，并且通过在小的元素上添加转换，您可以使其变得更慢，并创建后续效果。

$（'body'）。mouseover（function（）{$（this）.css（{cursor：'none' }）;}）; $（document）.on（'mousemove'，function（e）{$（'＃circle-big'）.css（{left：e.pageX，top：e.pageY}）; $ （'#circle'）.css（{left：e.pageX，top：e.pageY}）;}）;

 ＃circle-big {display：block;位置：绝对; margin-top：-30px; margin-left：-30px;宽度：60px;身高：60px; z-index：-1; text-align：center;边框：2px纯红色; border-radius：50％;}＃circle {display：block;位置：绝对;保证金：汽车;过渡：全1s线性;宽度：15px; height：15px; margin-top：-7.5px; margin-left：-7.5px; z-index：-1; background-color：rgba（255，0，0，0.5）;边界半径：50％; box-shadow：0px 0px 10px 4px rgba（255,255,255,1）;} a {font-size：26px; text-align：center; margin：100px auto; display：block;} a：hover {font-size：30px;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div id =cursor > < div id =circle-big>< / div> < div id =circle>< / div>< / div>< a> link< / a>  

或者如果您希望更大的跟随小的转换，请更改转换：

  $（'body'）。mouseover（function（）{$（this）.css（{cursor：'none'}） ;}（）; $（document）.on（'mousemove'，function（e）{$（'＃circle-big'）.css（{left：e.pageX，top：e.pageY}）; $（' #circle'）。css（{left：e.pageX，top：e.pageY}）;}）;  

 ＃circle-big {display：block;位置：绝对; margin-top：-30px; margin-left：-30px;过渡：全1s线性;宽度：60px;身高：60px; z-index：-1; text-align：center;边框：2px纯红色; border-radius：50％;}＃circle {display：block;位置：绝对;保证金：汽车;宽度：15px; height：15px; margin-top：-7.5px; margin-left：-7.5px; z-index：-1; background-color：rgba（255，0，0，0.5）;边界半径：50％; box-shadow：0px 0px 10px 4px rgba（255,255,255,1）;} a {font-size：26px; text-align：center; margin：100px auto; display：block;} a：hover {font-size：30px;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div id =cursor > < div id =circle-big>< / div> < div id =circle>< / div>< / div>< a> link< / a>  

$ b

更新

如果您想要当鼠标悬停链接时更改光标。

下面是一个简单的例子：

 $（'body'）。 $（document）.on（'mousemove'，function（e）{$（'＃circle-big'）。css（{left：e.pageX，top：e.pageY}）; $（'＃circle'） .css（{left：e.pageX，top：e.pageY}）;}）; $（'a'）。mouseover（function（）{$（'＃cursor'）。addClass（'on-link'） ;}）$（'a'）。mouseout（function（）{$（'＃cursor'）。removeClass（'on-link'）;}） 

< pre class =snippet-code-css lang-css prettyprint-ove rride> ＃circle-big {display：block;位置：绝对; margin-top：-30px; margin-left：-30px;过渡：全1s线性;宽度：60px;身高：60px; z-index：-1; text-align：center;边框：2px纯红色; border-radius：50％;}＃circle {display：block;位置：绝对;保证金：汽车;宽度：15px; height：15px; margin-top：-7.5px; margin-left：-7.5px; background-color：rgba（255，0，0，0.5）;边界半径：50％; z-index：-1; box-shadow：0px 0px 10px 4px rgba（255,255,255,1）;}＃cursor.on-link＃circle-big {border：2px solid blue;} a {font-size：26px; text-align：center; margin：100px auto; display：block;} a：hover {font-size：30px;}

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div id =cursor > < div id =circle-big>< / div> < div id =circle>< / div>< / div>< a> link< / a>  

I have seen this tendency on some websites now, where the default cursor is replaced with a new cursor – in many cases circles

These cursors are interactive – with interactive i mean when hovering an a-tag it changes size and color.

On this website: https://en.leviev-group.com/ you can see the effect on the cursor that I want.

I have tried to make a Pen, but it isn't working properly: https://codepen.io/anon/pen/VQwdBv?q=cursor&limit=all&type=type-pens

<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>

I would like the circle in the middle to be the cursor and the big circle around to follow the cursor with delay. When hovering a-tags it should wrap around the a-tag, similar to the example on the website. If possible made with javascript and css

How is this possible?

解决方案

You are almost good, simply make both element behave the same and by adding the transition on the small one you will make it slower and create the follow effect.

$('body').mouseover(function() {
  $(this).css({
    cursor: 'none'
  });
});

$(document).on('mousemove', function(e) {
  $('#circle-big').css({
    left: e.pageX,
    top: e.pageY
  });
  $('#circle').css({
    left: e.pageX,
    top: e.pageY
  });

});

#circle-big {
  display: block;
  position: absolute;
  margin-top: -30px;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  z-index: -1;
  text-align: center;
  border: 2px solid red;
  border-radius: 50%;
}

#circle {
  display: block;
  position: absolute;
  margin: auto;
  transition: all 1s linear;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  margin-left: -7.5px;
  z-index: -1;
  background-color: rgba(255, 0, 0, 0.5);
  border-radius: 50%;
  box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}

a {
  font-size: 26px;
  text-align: center;
  margin: 100px auto;
  display: block;
}

a:hover {
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
  <div id="circle-big"></div>
  <div id="circle"></div>
</div>

<a>link</a>

Or change the transition if you want the bigger one to follow the small one:

$('body').mouseover(function() {
  $(this).css({
    cursor: 'none'
  });
});

$(document).on('mousemove', function(e) {
  $('#circle-big').css({
    left: e.pageX,
    top: e.pageY
  });
  $('#circle').css({
    left: e.pageX,
    top: e.pageY
  });

});

#circle-big {
  display: block;
  position: absolute;
  margin-top: -30px;
  margin-left: -30px;
  transition: all 1s linear;
  width: 60px;
  height: 60px;
  z-index: -1;
  text-align: center;
  border: 2px solid red;
  border-radius: 50%;
}

#circle {
  display: block;
  position: absolute;
  margin: auto;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  margin-left: -7.5px;
  z-index: -1;
  background-color: rgba(255, 0, 0, 0.5);
  border-radius: 50%;
  box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}

a {
  font-size: 26px;
  text-align: center;
  margin: 100px auto;
  display: block;
}

a:hover {
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
  <div id="circle-big"></div>
  <div id="circle"></div>
</div>

<a>link</a>

UPDATE

You may consider event on links tag if you want to change the cursor when hovering links.

Here is a simple example:

$('body').mouseover(function() {
  $(this).css({
    cursor: 'none'
  });
});

$(document).on('mousemove', function(e) {
  $('#circle-big').css({
    left: e.pageX,
    top: e.pageY
  });
  $('#circle').css({
    left: e.pageX,
    top: e.pageY
  });
});
$('a').mouseover(function() {
  $('#cursor').addClass('on-link');
})
$('a').mouseout(function() {
  $('#cursor').removeClass('on-link');
})

#circle-big {
  display: block;
  position: absolute;
  margin-top: -30px;
  margin-left: -30px;
  transition: all 1s linear;
  width: 60px;
  height: 60px;
  z-index: -1;
  text-align: center;
  border: 2px solid red;
  border-radius: 50%;
}

#circle {
  display: block;
  position: absolute;
  margin: auto;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  margin-left: -7.5px;
  background-color: rgba(255, 0, 0, 0.5);
  border-radius: 50%;
  z-index: -1;
  box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}

#cursor.on-link #circle-big {
  border: 2px solid blue;
}

a {
  font-size: 26px;
  text-align: center;
  margin: 100px auto;
  display: block;
}

a:hover {
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
  <div id="circle-big"></div>
  <div id="circle"></div>
</div>

<a>link</a>

这篇关于两个圆圈应该跟随光标 - 一个小和一个大（延迟）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！