个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在一个有一个中心元素的网站上工作，我希望这个元素与光标交互。这是我到目前为止所拥有的:
var hello = document.getElementsByClassName("hello");
document.onmousemove = function() {
var x = event.clientX * 100 / window.innerWidth + "%";
var y = event.clientY * 100 / window.innerHeight + "%";
for(var i=0;i<hello.length;i++) {
hello[i].style.left = x;
hello[i].style.top = y;
hello[i].style.transform = "translate(-" + x + ",-" + y + ")";
}
}* {
padding: 0;
margin: 0;
}
body {
background-color: black;
}
.hello_wrapper_wrapper {
position: absolute;
background-color: none;
/* background-color: blue */
width: 35vw;
/* This object has to be larger than: width: 300px; height: 150px; */
height: 35vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hello_wrapper {
position: relative;
background-color: none;
width: 35vw;
height: 35vh;
}
.hello {
position: absolute;
background-color: white;
width: 300px;
height: 150px;
text-align: center;
line-height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<!doctype html>
<html lang="EN">
<head>
<meta charset="UTF-8">
<title> 0 </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hello_wrapper_wrapper">
<div class="hello_wrapper">
<div class="hello">
Hello World!
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>wrapper (width: 35vw; height: 35vh;) ，主要元素，称为:
hello具有以下尺寸:
hello (width: 300px; height: 150px;) . –
hello必须大于
wrapper为此，我会在查看 fiddle 时更改预览窗口的大小。
最佳答案
您可以使用 CSS 过渡属性来确保它是平滑的。
我尝试添加 transition-delay: 10ms , transition-timing-function: ease到 hello 元素 CSS。更多信息:https://css-tricks.com/ease-out-in-ease-in-out/在这里https://www.w3schools.com/css/css3_transitions.asp
* {
padding: 0;
margin: 0;
}
body {
background-color: black;
}
.hello_wrapper_wrapper {
position: absolute;
background-color: none; /* background-color: blue */
width: 35vw; /* This object has to be larger than: width: 300px; height: 150px; */
height: 35vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hello_wrapper {
position: relative;
background-color: none;
width: 35vw;
height: 35vh;
}
.hello {
position: absolute;
background-color: white;
width: 300px;
height: 150px;
text-align: center;
line-height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition-delay: 10ms;
transition-timing-function: ease;
}
onmouseout body 上的事件监听器。
var hello = document.getElementsByClassName("hello");
document.onmouseleave = function(){
for(var i=0;i<2;i++){
hello[i].style.left = '50%';
hello[i].style.top = '50%';
hello[i].style.transform = "translate(-50%,-50%)";
}
document.removeEventListener('onmousemove')
}
document.onmouseenter = function(){
setTimeout(function(){
document.onmousemove = function(){
var x = event.clientX * 100 / window.innerWidth + "%";
var y = event.clientY * 100 / window.innerHeight + "%";
for(var i=0;i<2;i++){
hello[i].style.left = x;
hello[i].style.top = y;
hello[i].style.transform = "translate(-"+x+",-"+y+")";
}
}
},1000)
}
关于javascript - JS : Add easing to moving element，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65454672/
26
4
0
当我查看控制台时，出现以下错误: jQuery.easing[jQuery.easing.def] is not a function 我正在尝试在 WordPress 上制作一个 slider 。我
大家好，我在我的 wordpress 站点中为通知栏设置了缓动效果，但每当我单击该按钮时，我都会收到 TypeError 错误。TypeError: v.easing[this.easing] 不是函
我想让某物 Action 流畅。想想一部电梯，当它到达所需楼层时，它不会全速运行并死机停止。它会尽可能快地移动，然后逐渐减速，直到到达所需的楼层。 我需要一个输入...的循环 int steps =
我正在设计一款“玩家”必须跳跃的游戏。我有一个有效的跳跃功能，但跳跃非常“线性”。我希望跳跃具有“缓入”和“缓出”功能。 这意味着跳跃的第一部分应该上升得更快，而在“顶部”附近速度会降低，而在向下移动
这个问题在这里已经有了答案: TypeError: p.easing[this.easing] is not a function (12 个答案) 关闭 6 年前。 我需要为我的 jQuery 链
当试图用 jQuery 显示一个 div 元素时，我得到了这个错误: [23:50:35.971] TypeError: p.easing[this.easing] is not a function
我正在尝试创建 anchor 链接滚动以及使用 Bootstrap 显示的工具提示 $(window).scroll(function(){ if ($(window).scrollTop()
我正在开发这个网站:http://www.siraryf.com并且手机响应式版本存在问题。 jQuery 在普通版本中工作良好，但在手机上停止工作，然后控制台中出现 TypeError: n.eas
CSS3 过渡的ease-in、ease-out 等有什么区别？ 最佳答案 CSS3 的过渡和动画支持缓动，正式称为“计时功能”。常见的有 ease-in、ease-out、ease-in-out、e
我正在尝试将 d3.js v5 中的代码转换为 d3.js 的版本 3。我尽一切可能将原始代码转换为 版本 5: http://plnkr.co/edit/w8v0Iz6Fg3rJTyxeXKca?p
我正在将 JQuery V1.9.1 升级到 V3.0，并且使用“jquery migrate 3.0”。我的控制台中出现此警告: JQMIGRATE: easing function "jQuery
几个月以来我第一次升级了我的 jQuery 东西(脸红)。我现在正在: jquery-1.9.1.js jquery-ui-1.10.2.custom.js(使用 ThemeRoller，并包含所有组
尝试在我的 wordpress 中使用 JQuery Easing 插件，但出现以下错误 (firebug) c.easing[this.options.specialEasing && this.o
我已经成功地在 UIView 的绘图中创建了自定义动画，方法是使用重复的 Timer 每隔几毫秒增加绘图的 alpha。 现在，我想用我的绘图实现缓动动画(减速)。我想通过每次调用 Timer 时以更
“轻松”一词代表什么？它出现在剧透按钮的代码中。它指的是边距、渐变、链接样式还是完全不同的东西？ 最佳答案 简而言之，ease 是一种在 CSS 中用于动画和过渡的计时函数。 有关更多详细信息，请访问
如果你看一下这个 fiddle :http://jsfiddle.net/5PH8p/ 然后你可以看到如果你将鼠标悬停在空白图像上，它会翻转并显示一些文本。但问题是，当您也将鼠标悬停在该段落上时，图像
目前，当我在 matplotlib 中为表面制作动画时，我手动生成快照并使用 ImageMagick 拼接在一起。这类似于标准的 matplotlib 动画，因为它不会在两帧之间过渡。 我可以在过渡期
我在一个非常简单的网站上安装并运行了jquery的缓动插件，可以在这里看到:http://harrisonfjord.com/folio/ 我的 anchor 链接代码(调用jquery函数将窗口滑动
文件引用(母版页): HTML Go to 50s 50s JavaScript.js 文件中的代码 $(".rightLinks").click(function (
transition: all .2s ease-in-out; 没有为我的文本输入字段工作。 我想让它做的是，当您聚焦文本输入字段时，黑色边框会淡入，反之亦然。 这是我的CSS: #game-pin
我是一名优秀的程序员,十分优秀！