Question

使用turn.js

$("#flipbook").turn({
    shadows: $.isTouch,
    acceleration: $.isTouch,
    autoCenter: true
});

和我自己的自定义代码（我在这里有一些帮助）

<script>
    var words = ['a','able','about','after','all','along','Along','an','and','And','arrived','as','asked','at','ate','attacked','baby','back','bad','baddies','be','became','before','Before','Behind','behind','being','big','biting','boat','borrowed','boy','boys','burst','by','came','care','causing','children','chores','collect','come','common','continued','couple','cut','dango','day','decided','demon','demons','did','did','difficult','do','dog','doing','eat','energy','enjoy','even','ever','everyone','evil','farewell','fight','find','firewood','floating','for','found','friends','from','gate','gave','gift','give','go','God','gold','got','green','grew','guessed','guys','had','happily','have','he','He','heard','help','her','him','his','home','houses','However','husband','in','including','into','is','island','it','Japan','Japanese','joined','journey','keep','lady','large','laundry','left','lived','looked','lot','lots','man','mean','met','momo','Momotaro','monkey','more','mountain','much','name','never','no','not','of','off','ogres','old','on','Once','once','One','one','open','out','own','pain','path','peach','pecking','people','pheasant','power','problems','quest','quickly','ran','real','red','returned','river','said','sailed','saw','screamed','see','seen','sell','set','She','she','shock','smashed','so','some','soon','special','spotted','stayed','stolen','stop','story','strong','surprised','take','Taro','tasty','terrible','terrorising','that','The','the','their','them','there','they','They','things','this','though','thought','through','time','to','too','took','up','upon','used','Using','using','village','walked','was','way','were','When','when','where','which','while','with','woman','work','would','you'],

    reg = new RegExp('\\b(' + words.join('|') + ')\\b', 'g');

    jQuery('.thestory').html(function (_, curHtml) {
        return curHtml.replace(reg, "<a href='#' class='$1'>$1</a>");
    });
</script>

<script>
    $( document ).ready(function() {
        function addSource(elem, path) {
            $('<source>').attr('src', path).appendTo(elem);
        }
        $('a').on('click', function(e) {
            var target= $(e.target);

            for (i in words) {
                if (target.hasClass(words[i])) {
                    var audio = $('<audio />', {
                        autoPlay : 'autoplay'
                    });
                    addSource(audio, 'audio/'+words[i]+'.mp3');
                    addSource(audio, 'audio/'+w[i]+'.ogg');
                    audio.appendTo('body');     
                }
            }
        });
    });
    </script>

#flipbook代码将我的两个自定义代码分开，它们在我的页面上按顺序排列，并分成不同的<script>标记（我喜欢将我的脚本分离出来进行组织）。

在第7页（第7个div .p7）之后，单击这些单词不再产生声音......可能是什么问题？

我在Google云端硬盘的帮助下在Fiddle上重新创建了该页面。

还有一个原因是这不适用于Android平板电脑吗？

更新删除turn.js脚本并让页面自然流动（从overflow:hidden;删除#viewport它完美无缺。但我想用turn.js书本效果....

Answer 1

它在我的测试中工作，我把你的函数放在turn.js转为事件。

$("#flipbook").bind("turned", function(event, page, view) {

  $('a').on('click', function(e) {
    target = $(e.target);

for (i in words) {
if (target.hasClass(words[i])) {
 var audio = $('<audio />', {
          id : words[i],
autoPlay : 'autoplay'
});
addSource(audio, 'https://googledrive.com/host/0B5Ubvdjb2dQUUEFIa2JUMkkzNFE/audio/'+words[i]+'.mp3');
//addSource(audio, 'https://googledrive.com/host/0B5Ubvdjb2dQUUEFIa2JUMkkzNFE/audio/'+words[i]+'.ogg');
audio.appendTo('body');
}
}

  });
});

7th div之后的代码中断

1 个答案: