如何通过声音在特定页面位置触发自动页面滚动

Question

我正在尝试创建一个交互式网络漫画（在 html、css 和 javascript 中），我想在其中触发自动页面以定义的速度从一个点向下滚动到另一个点，以使用多个 jpg 图像制作连续动画.

简单来说，当读者滚动并到达页面的某个（我已经定义的）位置时，页面会自动强制将页面向下滚动到预定义的点。

就像他们在这个网络卡通中所做的那样：http://comic.naver.com/webtoon/detail.nhn?titleId=350217&no=31

我也想触发音效，就像他们在上面提到的链接中所做的那样......

我尝试使用以下脚本完成此操作，但无法控制滚动的开始和停止位置。另外，我还希望它在单个页面加载时只滚动一次。

<SCRIPT language=JavaScript1.2>
//change 1 to another integer to alter the scroll speed. Greater is faster

var speed=1

var currentpos=0,alt=1,curpos1=0,curpos2=-1

function initialize(){

startit()

}

function scrollwindow(){

if (document.all &&

!document.getElementById)

temp=document.body.scrollTop

else

temp=window.pageYOffset

if (alt==0)

alt=2

else

alt=1

if (alt==0)

curpos1=temp

else

curpos2=temp

if (curpos1!=curpos2){

if (document.all)

currentpos=document.body.scrollTop+speed

else

currentpos=window.pageYOffset+speed

window.scroll(0,currentpos)

}

else{

currentpos=0

window.scroll(0,currentpos)

}

}

function startit(){

setInterval("scrollwindow()",50)

}

window.onload=initialize

</SCRIPT>

提前致谢

Answer 1

这是一个基本的自动滚动功能，当用户滚动超过 300 像素时触发。

var scroll = true;

$(window).scroll(function () {

        var position = $(document).scrollTop();
        console.log(position);

        if(position > 300 && position < 400 && scroll==true ) {
            scroll = false;

            $('html,body').animate({
                scrollTop: $("#scrollTo").offset().top
            },2000);

        }
    })

编辑

目前它是一次性的，但是如果你在第一个 if 语句之后添加这个 if 语句，它会将滚动状态重置为 true 并允许它再次运行。

if (position > 0 && position < 300 && scroll==false) {
        scroll = true;   
    }

编辑

要播放声音，您可以使用新的 .play 命令并将其添加到 IF 语句中发生的内容中，这是 .play 代码的示例；

$('#videoId').get(0).play();

编辑

这里的代码不是通过设置位置而是找到 div 的位置 - 这是它在 JSFiddle 中工作 - https://jsfiddle.net/3fxcbs2k/3/

    var scroll = true;

$(window).scroll(function (e) {

    var position = $(document).scrollTop();
    var startP = $("#scrollTOO").position();
    var finishP = $("#scrollTo");

    if(position > startP.top && startP.top+100 && scroll==true ) {
        scroll = false;

        $('html,body').animate({scrollTop: finishP.offset().top},2000);

    } if (position > 0 && position < 300 && scroll==false) {
        scroll = true;   
    }
})

要设置您希望它开始滚动的位置，请更改

var startP = $("      ").position();

然后设置结束位置改变值

var finsihP = $("      ");

音频

<audio id="sound">
    <source src="sound.mp3" type="audio/mpeg">
</audio>

var 滚动 = true;

$(window).scroll(function (e) {

var position = $(document).scrollTop();
var startP = $("#scrollTOO").position();
var finishP = $("#scrollTo");

jquery play 看起来像 - $('#sound').get(0).play();

所以只需将它添加到触发时发生的事情中，如下所示。

    if(position > startP.top && startP.top+100 && scroll==true ) {
        scroll = false;

        $('html,body').animate({scrollTop: finishP.offset().top},2000);
        $('#sound').get(0).play();

    } if (position > 0 && position < 300 && scroll==false) {
        scroll = true;   
    }
})

要制作更多内容，请执行以下操作

将 var 视为 id 标记，可以稍后在代码中调用，例如 = 之后是否有值；

var startP = $("#scrollTOO").position();

startP是vars唯一的名字，它的值是id为scrollTOO位置的div。

因此，要制作更多的起点和终点，您必须制作更多的 vars 1 起点和一个终点。示例；

var startP = $("#scrollTOO").position();
var finishP = $("#scrollTo");

var startP2 = $("#point2").position();
var finishP2 = $("#pint2");

然后它只是再做一个if语句，和之前一样，只是替换了起点和终点，

if(position > startP2.top && startP2.top+100 && scroll==true ) {
            scroll = false;

            $('html,body').animate({scrollTop: finishP2.offset().top},2000);

但是，因为我们有它，所以它只会触发一次，因此必须制作更多的 var 滚动，每个滚动 1 个。

var scroll = true;    
var scroll2 = true;
var scroll3 = true;
var scroll4 = true;

然后每个 if 语句都必须寻找相关的滚动，例如第二个滚动 if 语句的样子。

if(position > startP2.top && startP2.top+100 && scroll2==true ) {
scroll2 = false;