javascript - 根据 jQuery 中的旋转播放音乐

标签 javascript jquery html css rotation

是否可以仅在“世界” Angular 0 度到 27 度之间播放法国音乐?我根据滚动使世界旋转。谢谢大家:)

$(document).ready(function() {
var angle,
scroll = 0;
var $world = $('#world');
var $body = $('body');

//法国音乐 var $french = $('#french');

$(window).scroll(function() {

angle = $body.scrollTop() / 28;
$world.css('-moz-transform', 'rotate('+angle+'deg)').css('-webkit-transform', 'rotate('+angle+'deg)').css('-o-transform', 'rotate('+angle+'deg)').css('-ms-transform', 'rotate('+angle+'deg)');


$(french)[0].play(); 

console.log(scroll);
});
});

更新

这是正确的吗?它仍然不允许我播放任何其他音乐,除了第一个(法语)

            if(angle >=0 && angle <=26) {
        $(french)[0].play();
    }
    if(angle >27 && angle <=74) {
        $(british)[1].play();
    }
    if(angle >75 && angle <=115) {
        $(ny)[2].play();
    }
    if(angle >116 && angle <=164) {
        $(la)[3].play();
    }
    if(angle >165 && angle <=210) {
        $(japanese)[4].play();
    }
    if(angle >211 && angle <=270) {
        $(chinese)[5].play();
    }
    if(angle >271 && angle <=310) {
        $(indian)[6].play();
    }
    if(angle >311 && angle <=333) {
        $(egyptian)[7].play();
    }

最佳答案

$(window).scroll(function() {

angle = $body.scrollTop() / 28;
$world.css({'-moz-transform': 'rotate('+angle+'deg)',
           '-webkit-transform':'rotate('+angle+'deg)',
           '-o-transform': 'rotate('+angle+'deg)',
           '-ms-transform': 'rotate('+angle+'deg)'});

if(angle >=0 || angle <=27)
{$(french)[0].play(); 
}
console.log(scroll);

更新

if(angle >=28 || angle <=72)
{$(french)[1].play();
// another music play 
}

关于javascript - 根据 jQuery 中的旋转播放音乐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20145143/

相关文章:

javascript - 响应式图像映射上方的 Div

html - CSS 下拉菜单减少

html - 如何在没有转推的情况下嵌入推特时间线?

jquery - 大量项目的 Select2 性能

jquery - 试图根据屏幕分辨率显示不同的背景图像?

javascript - 从左/右/上/下动画时淡入 div

javascript - 如何在python-selenium中获取html元素的 'value'?

javascript - 使用ajax在链接点击上调用div

javascript - 在 Angular 6 中使用 jQuery 和自定义 JavaScript 文件

javascript - 在最大数之后 - 将所有剩余的 li 项目包装到 ul