Question

我想使用turn.js jquery插件在页面翻转时添加声音效果。因此，第一步是根据在线文档测试执行该功能的功能。所以代码应该是这样的：

    <script type="text/javascript">
    function loadApp() {

    // Create the flipbook

    $('.flipbook').turn({
            width:1000,
            height:680,
            elevation: 50,
            gradients: true,
            autoCenter: false,
    });
    $("#flipbook").bind("turned", function(event, page, view) { 
        alert("Page: "+page);
    });
    }

    yepnope({
    test : Modernizr.csstransforms,
    yep: ['../res_cod/js/turn.js'],
    nope: ['../res_cod/js/turn.html4.min.js'],
    both: ['../res_cod/css/basic.css'],
    complete: loadApp
   });
</script>

但是在开发者控制台中没有任何事情发生。没有警觉，没有任何消息。

Answer 1

只是您使用的选择器不正确 - 请注意.flipbook和#flipbook之间的区别

试试这个

$(".flipbook").bind("turned", function(event, page, view) { 
    console.log("Page: "+page);
});

Answer 2

将您的核心放入文档就绪部分或运行您的功能

$(document).ready(function(){
     //put your code here
   });

谢谢！

Answer 3

function loadApp() {
//$('#audio')[0].play();
// Create the flipbook

$('.flipbook').turn({

        //when:{turning:flip.playclip()},

        // Width

        width:922,

        // Height

        height:600,

        // Elevation

        elevation: 50,

        // Enable gradients

        gradients: true,

        // Auto center this flipbook

        autoCenter: true

});
}

// Load the HTML4 version if there's not CSS transform

yepnope({
test : Modernizr.csstransforms,
yep: ['../../lib/turn.js'],
nope: ['../../lib/turn.html4.min.js'],
both: ['css/basic.css'],
complete: loadApp
});








var html5_audiotypes={ //define list of audio file extensions
"mp3": "audio/mpeg",
"ogg": "audio/ogg",
"wav": "audio/wav",
}
function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
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")}}
}
}
//Initialize sound clips with 1 fallback file each:
var flip=createsoundbite("YOURSOUND.ogg", "YOURSOUND.mp3","YOURSOUND.wav")







when:{turning:flip.playclip()}; // add this line to library of turn js on         line no
299 // when left 290// not good

1218// perfect left flip     //same 1540

1407// perfect corner on hover right

1493// perfect right flip

1511// per self closing

1555// per on opening

1575 //consider



2810 only when lft mouse


  or


you can just only add audio file and play when turning with 
var vid = document.getElementById("myVideo"); 

function playVid() { 
vid.play(); 
} 

function pauseVid() { 
vid.pause(); 
}

Answer 4

请尝试使用此代码，不要忘记下载page-flip.mp3文件。您需要将播放声音代码放入转向功能内

<audio id="audio" src="page-flip.mp3"></audio>

$('.flipbook').turn({
    width:1000,
    height:680,
    elevation: 50,
    gradients: true,
    autoCenter: false,
    when: {
        turning: function(e, page, view) {  
            var audio = document.getElementById("audio");
            audio.play();
        }
    }
});

turn.js在翻页时添加声音

4 个答案: