小编Rob*_*ris的帖子

我需要在youtube iframe上播放一个事件.因此,当按下播放按钮时,我需要调用一个函数来隐藏span.module-strip

我试过这个但也许我走错了路？

$("#home-latest-vid")[0].onplay = function() {
    alert('hi');
};

HTML:

<div class="module module-home-video">

    <span class="module-strip">Latest Product Video</span>

        <iframe id="video" src="http://www.youtube.com/embed/RWeFOe2Cs4k?hd=1&rel=0&autohide=1&showinfo=0&enablejsapi=1" frameborder="0" width="640" height="360"></iframe>
</div>

我试图复制以下形状但没有成功:

我猜我需要一些:before和:after伪元素以及下面的css:

#pentagon {
    position: relative;
    width: 78px;
    height:50px;
    background:#3a93d0;
} 

我正在尝试在css中复制以下屏幕截图:

首先可以这样做还是我需要使用图像？

我有以下codepen启动它有代码:

<div class="module">
  <h2>Header</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui aspernatur sit perspiciatis debitis dolore impedit veniam illo dolorum tenetur eos eum placeat consectetur numquam error doloribus culpa ratione! Dolor voluptate!</p>
</div>

body {
  background:#f8f8f8;
  margin:40px;
}

.module {
  width:300px;
  background:white;
  padding:15px;
  border-top:5px solid orange;
  position:relative;
  &:after {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:40%;
  }
}

问题是模块底部的阴影......

编辑:忘了说这是一个响应框,所以没有设置宽度.

我需要在css中复制这个:

到目前为止,我已经有了基础:

<span>&lt; HTML &gt;</span>

CSS:

span {
  display:table-cell;
  vertical-align:middle;
  background-color:#266c30;
  width:200px;
  height:200px;
  text-align:center;
  border-radius:50%;
  color:white;
  font-size:30px;
  font-family:Arial, sans-serif;
  letter-spacing:1px;
}

看我的codepen

我有两个类似的功能,通过页面上的句柄执行响应式菜单切换,请参阅代码:

//responsive main navigation
    $(function() {
        var pull        = $('#pull');
            menu        = $('.main-nav ul');
            menuHeight  = menu.height();

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle('fast');
        });
    });

    //responsive blog navigation
    $(function() {
        var toggle        = $('#toggle-handle');
            sidebar        = $('.blog-sidebar-wrap');
            sidebarHeight  = sidebar.height();

        $(toggle).on('click', function(e) {
            e.preventDefault();
            sidebar.slideToggle('fast');
        });
    });

我的问题是如何编写这个,以便我不重复相同类型的过程(函数).我是否设置了一个功能并传入参数？帮助大多赞赏,jQuery/Javascript初学者在这里!