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

我想创建一个交互式网页漫画（在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>

在此先感谢

来源

2015-06-14 Cody Codes

这是一个基本的自动滚动功能，这将触发当用户滚动过去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 (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>

变种滚动= TRUE;

$（窗口）。滚动（功能（E）{

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

jQuery的打法看起来像 - $('#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的唯一名称，它的值是带有scrollTOO位置的id的div。

因此，为了使你将不得不做出更多的增值经销商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;

来源

2015-06-14 19:10:16

上面的脚本是否需要jquery？因为我试图将它添加到页面的嵌入式.js脚本中，并且它在300px之后不起作用。我还通常使用

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

回答

相关问题