我有一个非常具体的问题,我不确定你能用css做我想做的事.对于我在其他帖子上看到的内容,这可能是不受限制的,但我想我会问,以防有一些css天才.
我想实现一个非常具体的行为.
我有一列文字,该栏中的一些单词会突出显示.单击该单词时,我希望拆分文本并向上滑动视频.
我想实现一个非常具体的行为.
我有一列文字,该栏中的一些单词会突出显示.单击该单词时,我希望拆分文本并向上滑动视频.
我的HTML很简单：
<p>text<span id="clickable" class="link">highlighted text</span>.
<div class="closed">
<video id="video" width="100%">
<source src="myVideo.mp4" type="video/mp4">
</video>
</div>text</p>
css包含关闭的类(高度为0),类打开时具有一定的高度
CSS
.closed {
overflow: hidden;
height: 0px;
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}
.open {
height: 11.4vw;
}
当单击文本并播放视频时,js将类打开,非常直接
JavaScript的
$(document).ready(function() {
$("#clickable").click(function() {
var vid = document.getElementById("video");
var closed = $('.closed');
if(closed.hasClass("open")) {
closed.removeClass('open');
vid.pause();
} else {
closed.addClass('open');
vid.play();
}
});
});
一切正常.但事情就是这样,我知道我很挑剔,所以我不确定css是否可以做到这一点.我遇到的问题是“clickable”之后的文本跳转到下一行.我希望它不要这样做,因为它扰乱了阅读.我知道这种情况正在发生,因为我拥有视频的div是一个块元素.但是如果我改变标签使它成为一个跨度(我知道,一个异端),就像这样：
<span class="closed">
<video id="video" width="100%">
<source src="myVideo.mp4" type="video/mp4">
</video>
</span>
视频拒绝跟随
overflow: hidden;
规则,并没有隐藏在视线之外,这是我想要做的事情的重点.添加
display: inline-block;
对div不做.我已尝试过一些浮点数,但我在Chrome中遇到了不稳定的行为.所以我的想法已经不多了.我希望视频的行为像内联元素.有人可以把我从我的痛苦中解救出来并告诉我它不能完成,所以我可以继续前进.谢谢你的时间.
————————————————– – – – – – – – 编辑 – – – – – – – – – – – – – – – – – – ————————–
这是我的项目的gif图.这是使用“div”选项,它的工作方式与我想要的情况不同,正如我所说的那样,视频文本移动到我不想要的下一行之后.
GIF：
解决方法
段落(p)元素中应该没有div元素.它会导致段落在该点关闭,即使display：none也没有为div设置.如果使用F12工具检查DOM,可以看到该行为,并在
this post中查找有关该主题的更多详细信息.
您可以使用跨度替换div以避免换行,在隐藏视频时设置display：none,并在显示视频时切换到display：block.
当视频可见时,文本中会出现换行符.解决该问题的一种方法是将视频动态地放在行尾.可以通过获取视频后面的一些文本并将其移动到位于视频前面的跨度内来完成.
这些建议在this jsfiddle中实现.您可以更改容器宽度以测试行为.
HTML：
<div>
<p>
Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation <span id="clickable" class="link">ullamco</span>
<span id="spanBefore"></span>
<span id="spanVideo" class="closed">
<video id="video" width="100%">
<source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
</video>
</span>
<span id="spanAfter">laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa
qui officia deserunt mollit anim id est laborum.
</span>
</p>
</div>
CSS：
#spanVideo
{
overflow: hidden;
transition-property: height;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}
.closed
{
display: none;
}
.open1
{
display: block;
height: 0vw;
}
.open2
{
height: 65vw;
}
.link
{
background-color: yellow;
cursor: pointer;
}
Javascript代码：
var $spanVideo = $("#spanVideo");
function setVideoPosition() {
var $spanClickable = $("#clickable");
var $spanBefore = $("#spanBefore");
var $spanAfter = $("#spanAfter");
$spanAfter.text($spanBefore.text() + $spanAfter.text());
$spanBefore.text("");
var yBefore = $spanClickable.offset().top;
var words = $spanAfter.text().split(/(\s)/);
while ($spanAfter.offset().top <= yBefore && words.length > 0) {
$spanBefore.text($spanBefore.text() + words.shift());
$spanAfter.text(words.join(""));
}
}
$("#clickable").click(function () {
var video = document.getElementById("video");
if ($spanVideo.hasClass("closed")) {
setVideoPosition();
$spanVideo.toggleClass("closed").toggleClass("open1");
setTimeout(function () {
$spanVideo.toggleClass("open2");
video.play();
},50);
} else {
video.pause();
$spanVideo.toggleClass("open2");
setTimeout(function () {
$spanVideo.toggleClass("open1").toggleClass("closed");
},2000);
}
});
