小编Roy*_*oyS的帖子

CSS flex,如何在第一行显示一个项目,在下一行显示两个项目

我想这是一个非常简单的问题,但是我无法在flex容器中获得3个项目以显示2行,一行在第一行,另一行在第二行.这是flex容器的CSS.它在一行显示3个项目,显然:)

div.intro_container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
Run Code Online (Sandbox Code Playgroud)

如果flex-wrap设置为wrap,则3列显示在一列中.我认为需要换行设置才能在多行显示容器项目.我已经尝试过这个CSS作为第一个容器项目,打算让它占据整个第一行,但它不起作用

div.intro_item_1 {
  flex-grow: 3;
}
Run Code Online (Sandbox Code Playgroud)

我遵循了"CSS-Tricks"中的说明,但我真的不确定要使用哪种命令组合.任何帮助都会非常受欢迎,因为我对此感到困惑.

css flexbox

64
推荐指数
2
解决办法
11万
查看次数

将javascript音频移动到jquery

这是我在论坛上的第一篇文章.我正在建立一个英语/泰语语言课程网站,其中包含许多英语和泰语演讲的音频文件.我使用鼠标悬停/按钮javascript函数做了一个单独的网页概念证明 http://www.javascriptkit.com/script/script2/soundlink.shtml 对于一些mod和一些内联js,这个工作正常.

$(document).ready(function() { 
  var html5_audiotypes = { 
  "mp3": "audio/mpeg",
  "ogg": "audio/ogg",
     };      
function createsoundbite(sound) {
  "use strict";
  var html5audio = document.createElement('audio');
  if (html5audio.canPlayType){
   for(var i=0; i<arguments.length; i++) {
     var sourceEl = document.createElement('source');
     sourceEl.setAttribute('src', arguments[i]);
     if (arguments[i].match(/\.(\w+)$/i))
     sourceEl.setAttribute('type', html5_audiotypes[RegExp.$1]);
     html5audio.appendChild(sourceEl);
   }
   html5audio.load();
   html5audio.playclip = function() {
    html5audio.pause();
    html5audio.currentTime=0;
    html5audio.play();
    }
    return html5audio;
    }
    else{
    return {playclip:function(){throw new Error("Your browser doesn't support      HTML5 audio unfortunately")}};
    }
  }   
  var cn402=createsoundbite("audio/cn402.ogg", "audio/cn402.mp3");   
  var ry402=createsoundbite("audio/ry402.ogg", "audio/ry402.mp3");     
  var cn403=createsoundbite("audio/cn403.ogg", "audio/cn403.mp3");      
  var ry403=createsoundbite("audio/ry403.ogg", "audio/ry403.mp3");      
  var …
Run Code Online (Sandbox Code Playgroud)

html javascript audio jquery

5
推荐指数
1
解决办法
254
查看次数

如何使用jquery和html5检测音频文件的结尾

我有这个jquery代码和html工作正常的英语培训网站.

$(document).ready(function() {
  $("p").hover(
    function() {
      $(this).css({"color": "purple", "font-weight" : "bolder"});
    },
    function() {
      $(this).css({"color": "black", "font-weight" : ""});
    }
  ); 
  $("p").click(function (event) {
    var element = $(this);
    var elementID = event.target.id;
    var oggVar = (elementID +".ogg");   
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', oggVar); 
    audioElement.load();
    audioElement.addEventListener("load", function() { 
        audioElement.play(); 
    }, true);
    audioElement.play();    
  }); 
});

<div>
  <p id="one"> this is the first paragraph</p>
....   
  <p id="four"> this is the fourth paragraph</p> 
....   
</div>
Run Code Online (Sandbox Code Playgroud)

问题是如果在播放(或双击)音频文件时单击文本,则第二个文件(或同一文件)开始播放.所以我最终同时播放了两个文件.我需要阻止这一点.我认为'结束'事件是相关的,但是,尽管看了一些例子,我看不出如何检测文件是否正在播放并等到它完成之后再允许第二个文件启动(或者甚至阻止它播放在所有).任何帮助将非常感激 :)

audio jquery html5

5
推荐指数
1
解决办法
2万
查看次数

标签 统计

audio ×2

jquery ×2

css ×1

flexbox ×1

html ×1

html5 ×1

javascript ×1