发布于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/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!