iframe onclick 事件改变不透明度

Question

编辑：非常感谢@Arsh 帮助我解决了这个问题。现在它就像一个魅力。我添加了一些 CSS 转换以获得更好的外观，希望这个帖子将来能对某人有所帮助 :)

工作 fiddle 你可以在这里找到：http://jsfiddle.net/4bkzdrve/

原问题及解决方案：

我有 iframe youtube 视频并且已经将默认不透明度设置为 0.3 和悬停 1.0。我希望 iframe 检测 onlick 事件，然后将不透明度设置为 1.0，即使鼠标不在 iframe 区域上也是如此。我尝试了一切但没有成功。这是一些标记：

CSS:

iframe.video{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
transition:all 1s linear; 
-o-transition:all 1s linear; 
-moz-transition:all 1s linear; 
-webkit-transition:all 1s linear;} 

iframe.video:hover{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;}

HTML:

<iframe class="video" width="500" height="300" src="https://www.youtube.com/embed/YjWIAOsndu4" frameborder="0" allowfullscreen></iframe>

如果可能的话，我希望也有移动设备的解决方案，但不是必需的。在此先感谢您帮助我

Answer 1

这个问题的有效解决方案：http://jsfiddle.net/drs7sg3c/2/

首先记得将 jquery source 文件包含在 html document 内 <head> </head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

您可以在 </body> 结束标记上方使用下面的 jQuery 函数来实现：

<script type="text/javascript">

    $(document).ready(function(){
        $(document).on('click',function(){
           $('iframe').css('opacity','1');
        });
    });

</script>

即使点击 iframe 也可以将不透明度设置为 1 :

<script type="text/javascript">

        $(document).ready(function(){
            $('iframe').on('click',function(){
               $(this).css('opacity','1');
            });
        });

    </script>

我建议您打开以下 url 并阅读他们对 .click() 事件的看法：

https://api.jquery.com/click/

根据 guest

的建议

也检查这个：

<script type="text/javascript">

            $(document).ready(function(){
                $('iframe').one('click',function(){
                   $(this).css('opacity','1');
                });
            });

        </script>

完整 html 结构试试这个：

    <!doctype html>
<html>
    <head>
        <title>My iframe</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <style>
            .video{
            transition:all 1s linear; 
            -o-transition:all 1s linear; 
            -moz-transition:all 1s linear; 
            -webkit-transition:all 1s linear;
float:left;
position:relative;

} 
.video.opacity:hover:before{
  background:rgba('255,255,255,0');
 }
     .video.opacity:before{
     content:"";
        background:rgba(255,255,255,0.8);
        width:100%;
        height:100%;
        left:0;
        top:0;
        position:absolute;
        z-index:1;
    }
            </style>    
</head>
<body>
 <div class="video opacity">
<iframe width="500" height="300" src="https://www.youtube.com/embed/YjWIAOsndu4?wmode=transparent" frameborder="0" allowfullscreen></iframe>
</div>
<script type="text/javascript">
jQuery('.video').click(function(){
   $(this).removeClass('opacity');
    $(this).find('iframe')[0].src += "&autoplay=1";
    ev.preventDefault();

  });
</script>
</body>
</html>

现在上面的代码点击 .video 删除 opacity ``(:before) 并自动播放视频。

Answer 2

尝试将 .toggleClass() 与附加到 $(window) 的 click 事件一起使用，以便在第一次单击时将不透明度切换为 1，将 css 重置为初始值，包括:hover影响，当点击第二次时；在 window

上的每个 click 切换前者和后者

$(function () {
    var url = "https://www.youtube.com/embed/YjWIAOsndu4";
    var iframe = $("<iframe>", {
            "src": url,
            "class": "video",
            "width": "500px",
            "height": "300px",
            "frameborder": "0",
            "allowfullscreen": true
    });
    $.when($("body").append(iframe))
    .then(function (b) {
        $(window).on("click", function (e) {
            $(b).find(iframe).toggleClass("video")
        });
    });
})

jsfiddle http://jsfiddle.net/2x4xz/9/

iframe onclick 事件改变不透明度

iframe onclick event change opacity

javascript

css

iframe

jquery

opacity