如何在聲音的特定頁面位置觸發自動頁面滾動

我想創建一個交互式網頁漫畫（在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之後不起作用。我還通常使用

相關問題

如何在聲音的特定頁面位置觸發自動頁面滾動

回答

相關問題