个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我试图在给定的 x,y 坐标处以编程方式触发波纹动画，但我似乎无法正确执行。
我找到了一些有用的答案，如下所示:
我没有找到应用前两个的方法，因为在这个阶段我只是使用纸波纹元素而不创建自定义元素。第一个答案有些帮助，但我想控制波纹的 x,y 坐标。
这是我尝试执行此操作的方法，使用 Jacek 的第三个答案的片段:
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org">
<script src="/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/paper-ripple/paper-ripple.html">
<style>
.card {
position: relative;
display: inline-block;
width: 300px;
height: 240px;
vertical-align: top;
background-color: #fff;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
}
</style>
</head>
<body>
<template id="demo" is="dom-bind">
<div class="card">
<paper-ripple recenters></paper-ripple>
</div>
</template>
</body>
<script>
var demo = document.querySelector('#demo');
var mouseDown = new MouseEvent("mouseDown",{"clientX":30,"clientY":30,"screenX":30,"screenY":30});
var mouseUp = new MouseEvent("mouseUp",{"clientX":30,"clientY":30,"screenX":30,"screenY":30});
demo.addEventListener('dom-change', function() {
setInterval(triggerRippleDown, 1000);
setInterval(triggerRippleUp, 1200);
});
var triggerRippleDown = function() {
var paperRipple = document.querySelector('paper-ripple');
paperRipple.downAction(mouseDown);
}
var triggerRippleUp = function() {
var paperRipple = document.querySelector('paper-ripple');
paperRipple.upAction(mouseUp);
}
</script>
</html>通过鼠标事件传递 x,y 属性似乎不起作用，尽管文档的这一部分建议如此:
downAction: function(e) {
this.$.ripple.downAction({x: e.x, y: e.y});
}
关于在自定义组件之外以编程方式触发波纹的推荐方法有什么提示吗？
最佳答案
我不知道推荐的方法，但我有简单的解决方案。我的解决方案是不传递鼠标事件，而是传递带有 x,y 的对象。看这个例子:
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org">
<script src="/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/paper-ripple/paper-ripple.html">
<style>
.card {
position: relative;
display: inline-block;
width: 300px;
height: 240px;
vertical-align: top;
background-color: #fff;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
}
</style>
</head>
<body>
<template id="demo" is="dom-bind">
<div class="card">
<paper-ripple recenters></paper-ripple>
</div>
</template>
</body>
<script>
var demo = document.querySelector('#demo');
demo.addEventListener('dom-change', function() {
setInterval(triggerRippleDown, 1000);
setInterval(triggerRippleUp, 1200);
});
var triggerRippleDown = function() {
var paperRipple = document.querySelector('paper-ripple');
paperRipple.downAction({detail:{x:30,y:120}});
console.log(paperRipple.xStart);
}
var triggerRippleUp = function() {
var paperRipple = document.querySelector('paper-ripple');
paperRipple.upAction();
}
</script>
</html>我使用这个而不使用 mouseEvent
paperRipple.downAction({detail:{x:30,y:120}});
paperRipple.upAction();
关于javascript - polymer 纸波纹在给定的 x,y 坐标处以编程方式触发 downAction，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35349153/
25
4
0
我试图学习python并以此开始，当我尝试运行它时，我一直收到语法错误。光标跳到def start部分的close结束处。我不确定语法错误来自哪里，因为我用语音标记了所有打印件 #! python3
在我的应用程序中，我使用了 polymer 的 paper-dialog 元素。对话框的样式总是将它定位在中心，但我希望它在对话框和窗口右侧之间设置一个最小距离，所以当窗口缩小时，纸质对话框不会靠近右
我需要实现一个石头剪刀布锦标赛模拟器，它将玩完所有回合并返回锦标赛。 这是我的锦标赛数组: tournament = [ [ [ ["Armando",
所以我实际上是用自定义元素包装标准 paper-slider 元素，并希望包含一些样式。以下是我目前拥有的: /* Works */ paper-slider {
对于仅包含图像的 HTML 文档，如何缩放图像以填满整个工作表？我希望图像缩放它的宽度/高度以尽可能大/尽可能小以适合一张纸。 我开始用它来分页 footer {page-break-after:al
我正在尝试扩展 Polymer paper-slider 元素，以便能够获取枚举列表并在 slider 中迭代这些值，而不是仅显示数值。但是我在使样式起作用时遇到了麻烦。如您所见，如果您运行此代码片段
我是 paper.js 的新手。 对于这个项目，我需要一个将在许多情况下使用的形状(具有不同的填充颜色)，因此使用符号显然更好(而不是使用 Path.clone() 方法)。但是，一旦我将符号实例化为
我想重新组合我的 PDF 文档以使用我的打印机的 A4 格式在 A5 上打印它们。 我还需要在每个 A5 页面上打印两个站点(幻灯片)，当然应该是双面的。因此 A4 页面是横向格式。比我想把它剪在中间
我有两个元素一个在另一个上面，也就是说，一个挡住了另一个。假设 Item2 被 Item1 阻止。现在每当我使用 project.hitTest(Item2); 它工作正常。 但是当我使用鼠标的eve
我有一个网站，它本质上是一个大 Canvas 图像。目前，当 body 被加载时，它开始通过这段代码淡入: 但是我想在我的 paperscript 中调用它，因为有时 body 会在图像从 pape
我是一名优秀的程序员,十分优秀！