0

我正在制作一个个人资料页面，当点击个人资料图片时，图像会隐藏，并且底层的短片变得可见并播放。然后当点击视频时，视频将隐藏，图像将再次显示。这是我必须执行第一部分的代码，但它不起作用。

<html>
<head>
<style type="text/css">
#avatar {
width: 200px;
height: 200px;
position: relative;
}

.picture {
position:absolute;
top:0px;
left:0px;
}

#playbutton {
margin-left: auto;
margin-right: auto;
position:absolute;
top: 50px;
left: 50px;
}


.video
{
position:absolute;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
visibility: hidden;

}


</style>
</head>
<body>
<section class=pictureandvideo>
    <a id=togglepicture href="#">
    <div class=picture>
        <img id=avatar src="avatar.jpg"></img>
        <img id=playbutton src="opagueplayicon.png"></img>



//  The playbutton icon hovers over the avatar. Both make up the collective image.

    </div>



    <div class=video>

         // Video underlying the image

        <video  id=video1 width="200" height="200">
        <source src="Produce_0.mp4" type="video/mp4">
        <source src="Produce_0.ogg" type="video/ogg">
        </video>
    </div>
    </a>

</section>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script>
$('#togglepicture').click(function({$(this).children('.picture').toggle('fast').find('.video').css('visibility','visible').get(0).play()});
</script>


</body>
</html>
4

1 回答 1

0

使用 jQuery，您可以像这样实现它，但是您必须将锚点和事件删除到带有 id 的锚点#togglepicture

$(".picture").click(function(){
$(this).hide();
$(".video").show();
});

$(".video").click(function(){
$(this).hide();
$(".picture").show();
});
于 2015-02-11T19:37:20.120 回答