Question

我有3个视频。我想做的是：点击video1＆gt; video2和video3变小50％＆gt;点击video2＆gt; video1和video3重置为原始大小＆gt; video1和video3变小了50％。

此刻我正处于这一点：点击video1后，我重新调整了2个视频。点击同一视频后，video2和video3重新调整为原始大小。但是，如果我点击video2（当它比较小时为50％），那么video1会比原来小（50％），video3会回到原来的大小。

Fiddle DEMO（由于某种原因，它在我的电脑上不起作用）。

HTML code：

<div>
    <video id="video1" class="normal" height="200" width="300">
    <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4"></source>  
     HTML5 Video is required for this example. 
    </video>
</div>

<div>
    <video id="video2" class="normal" height="200" width="300">
    <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4"></source>  
     HTML5 Video is required for this example. 
    </video>
</div>


<div>
    <video id="Video3" class="small" height="200" width="300">
    <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4"></source>  
     HTML5 Video is required for this example. 
    </video>
</div>

CSS代码：

.normal {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
        transform: scale(1, 1);
}

.big {
   -webkit-transform: scale(2, 2);
   -moz-transform: scale(2, 2);
    -ms-transform: scale(2, 2);
        transform: scale(2, 2);

}

.small {
    -webkit-transform: scale(0.5, 0.5);
    -moz-transform: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
}

#video1{
-webkit-transition: -webkit-transform 0.3s ease-in;
   -moz-transition: -moz-transform 0.3s ease-in;
    -ms-transition: -ms-transform 0.3s ease-in;
        transition: transform 0.3s ease-in;
}
#video2{
-webkit-transition: -webkit-transform 0.3s ease-in;
   -moz-transition: -moz-transform 0.3s ease-in;
    -ms-transition: -ms-transform 0.3s ease-in;
        transition: transform 0.3s ease-in;
}
#video3{
    -webkit-transition: -webkit-transform 0.3s ease-in;
    -moz-transition: -moz-transform 0.3s ease-in;
    -ms-transition: -ms-transform 0.3s ease-in;
    transition: transform 0.3s ease-in;
}

JavaScript代码：

$("#video1").on('click', function() {
    $(this).toggleClass('big');
    $("#video2").toggleClass('small');
    $("#video3").toggleClass('small');
});

$("#video2").on('click', function() {
    $(this).toggleClass('big');
    $("#video1").toggleClass('small');
    $("#video3").toggleClass('small');
});

$("#video3").on('click', function() {
    $(this).toggleClass('big');
    $("#video1").toggleClass('small');
    $("#video2").toggleClass('small');

});

如何在重新调整视频大小之前重置视频大小？

提前致谢!!

Answer 1

切换课是一个很好的功能，但我不认为这是你在这里使用的最佳选择。认为你可以使用一个函数并用all来调用它，接近

function videoClicked(e)
{
    //get a referance to the video clicked
    var sender = e.target;

    //get all the videos 
    var $videos = $('.videos');
    //if the sender had class big it was already clicked and we need to reset all to normal
    if($(sender).hasClass('big'))
    {
        //remove all big classes
        $videos.removeClass('big');
        //and small class
        $videos.removeClass('small');
        //then add normal class
        $videos.addClass('normal');
        //we are done, lets go home
        return;
    }

    //remove big from all videos
    $videos.removeClass('big');
    //add small to videos that were not the sender (aka clicked video)
    $videos.not(sender).addClass('small');
    //add big to the sender
    $(sender).addClass('big');
}

我会向所有人添加一个.video类，然后添加

//this is jquery short hand for an on load function
$(function()
{
    //add event for all videos 
    $('.video').click(videoClicked);
});

jQuery调整视频大小，重置大小

1 个答案: