我正在尝试播放HTML5视频(VP8编码).我想要的是在某个位置玩它.让我们说50秒后的时间.
我试过但似乎有一些问题.你能否说一下我做错了什么?
这是代码:
<video id="vid1" width="640" height="360">
<source src="file.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
<script>
document.getElementById('vid1').currentTime = 50;
</script>
Run Code Online (Sandbox Code Playgroud)
我试过但它不起作用.视频加载时,它从刚开始播放.但是,如果我在播放过程中调用它,就像播放视频一段时间后它可以正常工作.有什么我想念的吗?
我正在制作一个滑块slick carousel,我想在幻灯片是 .css 时caption使用animatecss动画active。
加载时动画在第一张幻灯片上工作正常,但在那之后,动画在其他幻灯片上不起作用。
这是我的 HTML
<div id="hero-slider">
<div>
<img src="http://lorempixel.com/1920/500/abstract/1" alt="">
<div class="caption">
<h3>We push the edge of</h3>
<h2>what’s<br/>possible.123</h2>
</div>
</div>
<div>
<img src="http://lorempixel.com/1920/500/abstract/2" alt="">
<div class="caption">
<h3>We push the edge of</h3>
<h2>what’s<br/>possible.456</h2>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
这里是 SCSS
body {
padding: 0;
margin: 0;
}
#hero-slider {
.caption {
position: absolute;
left: 10%;
top: 10%;
h2,h3 {
color: white;
}
}
}
Run Code Online (Sandbox Code Playgroud)
以及jQuery我正在使用的
$(document).ready(function(){
$('#hero-slider').slick({
autoplay: true,
autoplaySpeed: …Run Code Online (Sandbox Code Playgroud) 我是Angular的新手,我想开发一个漏斗图。我喜欢funnel-graph-js库。我尝试了很多,但没有成功。
这是我的 funnel-graph-directive.ts
import { Directive, ElementRef } from '@angular/core';
// import * as graph from '../../../assets/js/funnel-graph.js';
import * as graph from 'funnel-graph-js/dist/js/funnel-graph.js';
var graph = new FunnelGraph({
container: '.funnel',
gradientDirection: 'horizontal',
data: {
labels: ['Impressions', 'Add To Cart', 'Buy'],
subLabels: ['Direct', 'Social Media', 'Ads'],
colors: [
['#FFB178', '#FF78B1', '#FF3C8E'],
['#A0BBFF', '#EC77FF'],
['#A0F9FF', '#7795FF']
],
values: [
[3500, 2500, 6500],
[3300, 1400, 1000],
[600, 200, 130]
]
},
displayPercent: true,
direction: 'horizontal'
});
graph.draw();
@Directive({
selector: '[appFunnelGraph]'
}) …Run Code Online (Sandbox Code Playgroud) 我试图实现一个布局,第一行有2列,此后有3列,就像附加的图像一样。我正在使用css grid。
到目前为止,这是我的代码
body {
background: #161616;
color: #bdbdbd;
font-weight: 300;
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: Helvetica neue, roboto;
}
h1 {
font-weight: 300;
}
a {
color: white;
text-decoration: none;
color: #4d4d4d;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 15px;
grid-row-gap: 15px;
}
.feature__item {
background-color: #C4C4C4;
padding: 15px;
color: #4d4d4d;
}
.feature__item:first-of-type{
grid-column-start: 1;
grid-column-end: 3;
}
.feature__item:nth-child(2) {
}Run Code Online (Sandbox Code Playgroud)
<div class="container">
<div class="feature__item">
<h5>Heading</h5> …Run Code Online (Sandbox Code Playgroud)javascript ×3
angular ×1
animate.css ×1
css ×1
css-grid ×1
html5-video ×1
jquery ×1
slick.js ×1
typescript ×1