小编Mil*_*los的帖子
如何为我的SVG路径设置动画
我有一个SVG我试图用animejs动画.
基本上它是一个选择路径图.
我设法制作动画,但结果是错误的.
我要这个:
var lineDrawing = anime({
targets: 'path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutCubic',
duration: 4000,
begin: function(anim) {
document.querySelector('path').setAttribute("stroke", "#4a56f2");
document.querySelector('path').setAttribute("fill", "none");
},
complete: function(anim) {
},
autoplay: false
});
document.querySelector('.play-drawing').onclick = lineDrawing.restart;body {
margin: 20px;
font-family: 'Lato';
font-weight: 300;
font-size: 1.2em;
}
#anime-demo {
position: relative;
}
svg {
padding: 10px;
}
button {
background: orange;
color: white;
margin: 5px;
padding: 10px;
border-radius: 4px;
font-family: 'Lato';
cursor: pointer;
border: none;
outline: none;
}
button:hover {
background: …13
推荐指数
推荐指数
2
解决办法
解决办法
327
查看次数
查看次数
如何优化CSS动画(缩放,旋转,模糊)
以下HTML示例包含两张图片; 一个背景,另一个是对象.两者都使用缩放和旋转动画.在全高清显示器上,它往往是不连贯的.当你在Firefox中观察它的性能时它大约需要20 fps.
首先我使用jQuery; 提高性能我选择了CSS,但它仍然不完美.为了重现问题,请转到全屏.我怎样才能让它变得更好？
.html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #121212;
}
.maincontainer {
width: 100%;
padding-bottom: 100%;
position: fixed;
overflow: hidden;
}
.bg {
background-image: url(http://wallpaper-gallery.net/images/beautiful-pictures-of-nature/beautiful-pictures-of-nature-2.jpg);
height: 100%;
width: 100%;
display: block;
position: absolute;
z-index: -99;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-position: top;
background-size: 100% auto;
background-repeat: no-repeat;
}
.bg2 {
height: 100%;
width: 100%;
display: block;
position: absolute;
z-index: -99;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-position: top;
background-size: 100% auto;
background-repeat: no-repeat;
} …10
推荐指数
推荐指数
2
解决办法
解决办法
1052
查看次数
查看次数
iframe获取可见大小
在 iframe 内部，我需要弄清楚视觉尺寸到底是多少（使用 js 或 jquery）。
在此示例中，仅显示了 iframe 的一部分。iframe 大小为 300x300，但 div 会将其限制为 300x100。
<div style="max-width: 300px; max-height: 100px; overflow: hidden">
<iframe width="300" height="300" src="http://www.rapidtables.com/web/tools/window-size.htm" style="border:none"></iframe>
</div>
我如何从 iframe 内部检测实际可见尺寸？
尝试过
window.clientHeight
window.outerHeight
window.innerHeight
window.availableHeight
$(window).height();
5
推荐指数
推荐指数
1
解决办法
解决办法
1279
查看次数
查看次数
使用CSS标记元素,以便稍后使用JS检测它们
我正在使用CSS选择器来匹配某些元素,我想用javascript检测这些元素.我发现我可以在这些元素的css中设置颜色,然后通过颜色检索它们.问题是style.backgroundColor仅返回if inline样式.
这是我的尝试 http://jsfiddle.net/qUDjb/29/
CSS
div{background-color: lightgrey;}
JS
alert(document.getElementById("myDiv").style.backgroundColor);
有没有办法让颜色检测工作,或者有人可以更好地了解如何检测受影响的元素(通过css选择器)？
我不想为此使用jquery.
1
推荐指数
推荐指数
1
解决办法
解决办法
53
查看次数
查看次数
自动 - IE根据文本单击一个按钮.
我需要单击一个表单上的按钮,它看起来像这样
<button id="****" class="****">Click Me</button>
我使用以下代码单击其他按钮工作正常,但这是因为其他按钮已value="*****"分配给它
$oButtons = _IETagnameGetCollection($oIE, "button")
For $oButton in $oButtons
If String($oButton.value) = "Click Me" Then
_IEAction($oButton, "click")
EndIf
Next
我知道$oButton.value是什么获得了按钮的价值,但除此之外还有什么其他"操作符" value可以获得按钮的锚文本？
0
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数