程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

使用 JS 放大悬停链接上的自定义光标指针

发布于2021-12-03 00:24     阅读(1018)     评论(0)     点赞(7)     收藏(1)


我一直在研究一个自定义光标,当它悬停在具有特定属性的对象上时,我希望它增长。我从 css 开始,发现不可靠,现在我尝试使用 js-纯 js,而不是 jquery。

光标移动似乎工作得很好,转换外圆的位似乎也没有出现任何错误,这让我对这里发生的事情感到困惑。任何帮助,将不胜感激。

/*kinda laggy cursor control js */
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
  cursor.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;")
})

const cursor2 = document.querySelector('.cursor2');
document.addEventListener('mousemove', e => {
  cursor2.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;")
})

const all = document.querySelectorAll(".use");
document.addEventListener('mouseOver', function() {
  cursor.style.transform = scale(2)
})
.cursor {
  width: 25px;
  height: 25px;
  position: absolute;
  border: 2px solid rgb(41, 41, 41);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: 50ms;
  transition-timing-function: ;
  mix-blend-mode: difference;
  z-index: 200;
  pointer-events: none;
}

.cursor2 {
  z-index: 200;
  transition: 10ms;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: black;
  pointer-events: none;
  mix-blend-mode: difference;
  position: absolute;
  transition-timing-function: ;
}

.style {
  font-family: 'Helvetica';
  font-size: calc(2em + 8vw);
  font-weight: 700;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  -webkit-text-stroke: 1px;
  -webkit-text-stroke-color: rgb(0, 0, 0);
  letter-spacing: -.6vw;
  line-height: calc(.7em + 1vw);
  animation: marquee 30s linear infinite;
  display: inline-block;
  user-select: none;
}

a {
  text-decoration: none;
  cursor: none;
}

a:hover+.cursor {
  transform: scale(1.5);
  !important transition-duration: 500ms;
}
<div id="style use"><a href="somwhere.png">hello</a></div>
<!-- outer cursor div-->
<div class="cursor">
</div>
<!-- inner cursor div-->
<div class="cursor2">
</div>


解决方案


element.style.transform需要有一个字符串值(在你的情况下,它应该是'scale(2)'[a string])。我添加了一个类enlarged时增加的宽度和高度样式添加到您的鼠标mouseenter,并mouseout在文档中的每一个环节。

这是一个工作示例。

const cursor = document.querySelector('.cursor');
const cursor2 = document.querySelector('.cursor2');
const links = document.querySelectorAll('a')

links.forEach(link => {
  link.addEventListener('mouseenter', e => {
    cursor.classList.add('enlarged')
  })
  link.addEventListener('mouseout', e => {
    cursor.classList.remove('enlarged')
  })
})

document.addEventListener('mousemove', e => {
  cursor.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;")
  cursor2.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;")
})
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: none;
}

.cursor {
  width: 25px;
  height: 25px;
  position: absolute;
  border: 2px solid rgb(41, 41, 41);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: 
    top 50ms linear,
    left 50ms linear,
    width 500ms ease,
    height 500ms ease;
  z-index: 1;
  pointer-events: none;
}

.cursor.enlarged {
  width: 50px;
  height: 50px;
}

.cursor2 {
  transition: 10ms;
  z-index: 1;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: black;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -50%);
}

a {
  text-decoration: none;
  cursor: none;
  font-family: Helvetica;
  font-size: 4em;
  padding: 15px;
}
<div id="style use"><a href="somwhere.png">Hello</a></div>
<!-- outer cursor div-->
<div class="cursor">
</div>
<!-- inner cursor div-->
<div class="cursor2">
</div>




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/246448/0574e826d0d9041455ec/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

7 0
收藏该文
已收藏

评论内容:(最多支持255个字符)