0

文本起始位置在视频的底部。将文本拖动到任何地方后，我希望文本回到与设置位置完全相同的起始位置。我试过了，但它没有按我想要的方式工作，

$("#returnPosition").click(function() {
    $("#subtitle").animate({left:'50',bottom:'40px'});
});

但似乎它只专注于动画到左 50，不包括底部。

这里是 HTML5 代码，

<div id="container" class="container">

                <video id="video" width="930" height="500" controls>
                    <source src="caption.mp4" type="video/mp4">
                    <source src="caption.ogg" type="video/ogg" >
                    <source src="caption.webm" type="video/webm" >
                </video> 
                <div id="subtitle" class="subtitle">
                </div>
</div>

和 CSS 用于字幕起始位置，

.container  {
                position:relative;
            }
    .subtitle {
                    position:absolute;
                    width:840px;

                    bottom:40px;
                    left:50;
                    z-index:2000;
                    color:white;

                    font-weight:bold;
                    font-size:150%;
                    text-align:center;
    }
4

3 回答 3

0

尝试将 left:50px 放在 css 部分以及从 javascript 运行的 css 上。您缺少度量单位 .. 像素中的 px，但我强烈建议改用“嗯”。

于 2013-04-23T19:50:14.540 回答
0

我找到了解决方案，它很简单，但没有动画。

$("#returnPosition").click(function() {
    $("#subtitle").css({"left": "50", "bottom": "40px"});
    document.getElementById("subtitle").style.top="";
});

字幕不移动到视频底部的原因是因为设置了顶部位置。它需要删除它才能使这项工作。所以我清除了顶部位置设置并且它起作用了。

于 2013-04-25T17:42:52.373 回答
-1

我实际上会使用链接中的引用并对其进行一些修改..

原来的：

$("#right").click(function(){ $(".block").animate({"left": "+=50px"}, "slow"); });

您提供的代码：

$("#returnPosition").click(function() { $("#subtitle").animate({left:'50',bottom:'40px'}); });

我的贡献

我用http://pxtoem.com/ 来转换你的 50px，.. 它说 1em，它认为它更清晰

                        jQuery(function($)
                        {

                    // We clear the event here, the click then we pass it as an argument.. event.. it's the click or the event that triggers the function is the same..     
                // identify the object for easier readyness, because that will allow you to reuse it for a class in the event that you want to extend something later, instead of an id.. this is only in the case that you want to have many divs in the future and it's a normal coding convention, I believe with jQuery.    

                        $("a#returnPosition").off('click').on('click',  function(event) 
                        {

                        // modified this
                        var the_div=$("div#subtitle");
                        the_div.animate({"left": "+=1em"}, 1820);
                        the_div.animate({"bottom": "+=1em"}, 1820);

                        // Keep this in case of the need to return false...    event.preventDefault();
                              });

                        });
于 2013-04-23T20:02:50.460 回答