广告合作QQ：76874919

javascript – iframe onclick animate或toggle

jQuery 2019-06-03

我必须实现一个设计,其中div占视频iframe的15-20％(youtube video,vimeo等).当用户点击视频并且视频开始时,div应该向下滑动(为marginTop：0设置动画).然后,当用户再次点击视频以停止它时,div应该出现(marginTop：-100px).

这是我用来捕获iframe上的click事件并为div滑动动画的脚本.

jQuery(document).ready( function() {
    var overiFrame = -1;
    jQuery('iframe').hover( function() {
        overiFrame = jQuery(this).closest('.video-container');
    },function() {
        overiFrame = -1
    });
    jQuery(window).blur( function() {
        if( overiFrame != -1 )
            jQuery('.header-container').animate({
                marginTop: '0'
            })
    });
});

我不知道如何捕获iframe上的第二次单击并将div向上滑动.我尝试使用toggleClass但是在脚本添加类之后它不会删除它.

稍后编辑

我对脚本做了一些修改,但它仍然无法正常工作.它仅在用户在iframe上单击一次,在iframe外单击一次时才有效,依此类推.如果用户在iframe中多次单击,则动画不起作用.

jQuery(document).ready( function() {
    var overiFrame = -1;
    jQuery('iframe').hover( function() {
        overiFrame = jQuery(this).closest('.video-container');
    },function() {
        overiFrame = -1
    });

    jQuery(window).blur( function() {
        if( overiFrame != -1 ) {
            if (jQuery('.header-container').hasClass('animate')) {
                jQuery('.header-container').removeClass('animate')
        }   else {
                jQuery('.header-container').addClass('animate')
            } 
        }

    });
});

这是我试图实现的设计的屏幕截图：

最佳答案
你不能完全意识到你想要什么,因为点击事件不能从跨域iframe听,但我有一个想法如何部分地做到这一点.

这只是一个例子,如果你喜欢这个想法,你需要自定义我的解决方案.

提示是 – 使用叠加来获取点击,隐藏叠加层以让用户点击视频,再次显示叠加以获得其他点击.当然,工具提示也可以通过您自己设置的点击和动画来切换.

坏消息 – 视频的所有点击都需要双击

HTML