Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 久久r热这里有精品视频,最近最新免费中文字幕一,亚洲一区二区三区四区在线观看 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          瀏覽器的一些“滾動(dòng)”行為鑒賞
          
        
           
          
	
	
          
		瀏覽器的一些“滾動(dòng)”行為鑒賞
          
                        
          類
          按照我的個(gè)人理解，滾動(dòng)分全局滾動(dòng)(瀏覽器窗口)跟局部滾動(dòng)(自定義的盒子)，以下內(nèi)容絕大部分都是指全局滾動(dòng)，局部滾動(dòng)的話獲取指定的DOM再調(diào)用相應(yīng)的API即可?
          如何設(shè)置全局滾動(dòng)條高度
          1. 最常用的方法：
          window.scrollTo(0, 0);
// or
window.scrollTo({
 left: 0,
 top: 100
});
復(fù)制代碼

          1. 也可以利用相對(duì)滾動(dòng)設(shè)置：
          window.scrollBy(0, 0);
// or
window.scrollBy({
 left: 0,
 top: 100
});
復(fù)制代碼

          1. 或者利用scrollTop設(shè)置：
          document.scrollingElement.scrollTop=100;
復(fù)制代碼

          注意：scrollTo跟scrollBy的參數(shù)是一樣的，區(qū)別就是scrollBy滾動(dòng)距離是相對(duì)與當(dāng)前滾動(dòng)條位置進(jìn)行滾動(dòng)?
          效果對(duì)比如下：
          很明顯，前者就是把滾動(dòng)高度設(shè)置成100，而后者是每次都增加100，這就是為什么稱之為相對(duì)滾動(dòng)了?
          如何指定一個(gè)元素顯示在視窗
          1. 最常用的方法：
          // 獲取元素的offsetTop(元素距離文檔頂部的距離)
let offsetTop=document.querySelector(".box").offsetTop;
// 設(shè)置滾動(dòng)條的高度
window.scrollTo(0, offsetTop);
復(fù)制代碼

          效果如下：
          1. 或者用錨點(diǎn)：
          <a href="#box">盒子出現(xiàn)在頂部</a>
<div id="box"></div>
復(fù)制代碼

          效果如下：
          1. 或者利用scrollIntoView進(jìn)行展現(xiàn)：
          document.querySelector(".box").scrollIntoView();
復(fù)制代碼

          效果如下：
          還可以指定元素的出現(xiàn)位置：
          // start出現(xiàn)在視口頂部、center出現(xiàn)在視口中央、end出現(xiàn)在視口底部
document.querySelector(".box").scrollIntoView({
 block: "start" || "center" || "end"
});
復(fù)制代碼

          效果如下：
          如何設(shè)置滾動(dòng)具有平滑的過(guò)渡效果
          1. 利用每個(gè)方法的參數(shù)設(shè)置：
          window.scrollTo({
 behavior: "smooth"
});
window.scrollBy({
 behavior: "smooth"
});
document.querySelector(".box").scrollIntoView({
 behavior: "smooth"
});
復(fù)制代碼

          效果如下：
          1. 或者用css屬性設(shè)置：
          html {
 scroll-behavior: smooth; // 全局滾動(dòng)具有平滑效果
}
// 或者所有
* {
 scroll-behavior: smooth;
}
復(fù)制代碼

          效果如下：
          注意：設(shè)置了該屬性之后，所有方法都可以不用設(shè)置behavior參數(shù)了，二選一即可，因?yàn)槎际强刂飘?dāng)前指定元素的滾動(dòng)行為，所以錨點(diǎn)跳轉(zhuǎn)、設(shè)置scrollTop也具有平滑(smooth)的滾動(dòng)行為?
          一些有趣的東西
          1. scrollingElement
          該對(duì)象可以非常兼容地獲取scrollTop、scrollHeight等屬性，在移動(dòng)端跟PC端都屢試不爽
          還記得當(dāng)初寫(xiě)這個(gè)兼容性方法：
          let scrollHeight=document.documentElement.scrollHeight || document.body.scrollHeight;
復(fù)制代碼

          現(xiàn)在你只需要：
          let scrollHeight=document.scrollingElement.scrollHeight;
復(fù)制代碼

          因?yàn)樵贛DN中是這樣介紹它的：
          標(biāo)準(zhǔn)模式返回documentElement，怪異模式返回body；
          2. 滾動(dòng)到底部
          window.scrollTo({
 left: 0,
 top: document.scrollingElement.scrollHeight
});
// 如果你實(shí)在是懶的話...
window.scrollTo(0, 999999);
復(fù)制代碼

          注意：平滑滾動(dòng)到頂部或者底部自己加參數(shù)或者屬性即可?
          3. 判斷瀏覽器已滾動(dòng)到底部
          window.addEventListener("scroll", ()=> {
 let {
 scrollTop,
 scrollHeight,
 clientHeight
 }=document.scrollingElement;
 
 // 當(dāng)前滾動(dòng)高度 + 視口高度 >=文檔總高度
 if (scrollTop + clientHeight >=scrollHeight) {
 console.log("已到達(dá)底部");
 }
});
復(fù)制代碼

          效果如下：
          函數(shù)節(jié)流
          當(dāng)你沒(méi)加函數(shù)節(jié)流：
          window.addEventListener("scroll", ()=> console.log("我在滾我在滾！"));
復(fù)制代碼

          效果如下：
          當(dāng)你加了函數(shù)節(jié)流之后：
          window.addEventListener("scroll", throttle(()=> console.log("我在滾我在滾！")));
復(fù)制代碼

          效果如下：
          throttle源碼：
          function throttle(fn, interval=500) {
 let run=true;
 return function () {
 if (!run) return;
 run=false;
 setTimeout(()=> {
 fn.apply(this, arguments);
 run=true;
 }, interval);
 };
}
復(fù)制代碼

          用處：減少代碼執(zhí)行頻率?
          函數(shù)防抖
          當(dāng)你加了函數(shù)防抖之后：
          window.addEventListener("scroll", debounce(()=> console.log("滾動(dòng)結(jié)束！")));
復(fù)制代碼

          效果如下：
          debounce源碼：
          function debounce(fn, interval=500) {
 let timeout=null;
 return function () {
 clearTimeout(timeout);
 timeout=setTimeout(()=> {
 fn.apply(this, arguments);
 }, interval);
 };
}
復(fù)制代碼

          用處：判斷某個(gè)動(dòng)作結(jié)束，如剛剛的滾動(dòng)結(jié)束、input輸入結(jié)束等?
          解決IOS設(shè)備局部滾動(dòng)不順暢(粘手)
          除了瀏覽器原生滾動(dòng)，自定義的滾動(dòng)條都會(huì)出現(xiàn)這種情況，加以下屬性就可以解決：
          .box {
 -webkit-overflow-scrolling: touch;
}
復(fù)制代碼

          對(duì)比如下：
          注意：要真機(jī)才能看到效果，這里指的局部滾動(dòng)是指自己定義的盒子，然后設(shè)置overflow: auto || scroll;后的滾動(dòng)行為；
          滾動(dòng)傳播
          指有多個(gè)滾動(dòng)區(qū)域，當(dāng)一個(gè)滾動(dòng)區(qū)域滾動(dòng)完之后，繼續(xù)滾動(dòng)會(huì)傳播到到父區(qū)域繼續(xù)滾動(dòng)的行為：
          .box {
 overscroll-behavior: contain; // 阻止?jié)L動(dòng)傳播
}
復(fù)制代碼

          對(duì)比效果圖如下：
          橫向滾動(dòng)
          移動(dòng)端遇到此需求比較多，常用于圖片展示：
          <ul>
 <li>
 <img src="">
 </li>
 // ...
</ul>
ul {
 white-space: nowrap; // 超出不換行
 overflow-x: auto;
 li {
 display: inline-block;
 img {
 display: block;
 width: 200px;
 }
 }
}
復(fù)制代碼

          效果如下：
          滾動(dòng)結(jié)束后，強(qiáng)制滾動(dòng)到指定元素
          基于上面的例子，我們?cè)O(shè)置如下屬性：
          ul {
 scroll-snap-type: x mandatory;
 
 li {
 scroll-snap-align: start;
 }
}
復(fù)制代碼

          效果如下：
          仔細(xì)看會(huì)發(fā)現(xiàn)，我們松手的時(shí)候，會(huì)將最近的元素滾動(dòng)到最右邊（初始位置，對(duì)于Y軸來(lái)講就是頂部，X軸則是右邊）
          也可以設(shè)置出現(xiàn)在中間：
          li {
 scroll-snap-align: center;
}
復(fù)制代碼

          效果如下：
          這樣，一個(gè)簡(jiǎn)易的輪播圖效果就出來(lái)啦！
          還可以實(shí)現(xiàn)全屏滾動(dòng)：
          注意：該屬性會(huì)在你滾動(dòng)完之后再做處理，也就是說(shuō)你可以一下子從圖片1跳到圖片9?
          最后
          以上涉及到的方法或?qū)傩晕臋n如下：
          1. scrollTo
          2. scrollBy
          3. scrollIntoView
          4. scrollingElement
          5. scroll-behavior
          6. -webkit-overflow-scrolling
          7. overscroll-behavior
          8. scroll-snap-type
          9. scroll-snap-align
          如果你覺(jué)得這篇文章不錯(cuò)，請(qǐng)別忘記點(diǎn)個(gè)贊跟關(guān)注哦~
          么是全屏布局
          全屏布局就是指 HTML 頁(yè)面鋪滿整個(gè)瀏覽器窗口, 并且沒(méi)有滾動(dòng)條。而且還可以跟隨瀏覽器的大小變化而變化。
          能是出于節(jié)省用戶流量，許多移動(dòng)端瀏覽器都不支持H5自動(dòng)播放視頻，必須在用戶主動(dòng)交互（點(diǎn)擊或者滑動(dòng)等）后才可以通過(guò)js播放視頻
          PC端可以通過(guò)設(shè)置muted，自動(dòng)播放靜音視頻
          安卓瀏覽器均不支持自動(dòng)播放，實(shí)測(cè)在微信內(nèi)置瀏覽器，滑動(dòng)視為交互行為，可以在這之后播放視頻，抖音內(nèi)置瀏覽器則需要點(diǎn)擊交互，鴻蒙系統(tǒng)瀏覽器可以自動(dòng)播放靜音視頻
          解決方案
          • 法一 引導(dǎo)用戶點(diǎn)擊或滑動(dòng)
          進(jìn)入網(wǎng)站時(shí)彈窗，例如歡迎語(yǔ)等，用戶點(diǎn)擊關(guān)閉后執(zhí)行視頻播放
          簡(jiǎn)單粗暴的方法，在某些場(chǎng)景時(shí)適用的，實(shí)測(cè)在安卓、鴻蒙、IOS、抖音瀏覽器等均可以用這個(gè)方法解決
          close() {
          const videos=document.querySelectorAll('video');
          for (let i=0; i < videos.length; i++) {
          const element=videos[i];
          element.play();
          }
          }
          【更多音視頻學(xué)習(xí)資料，點(diǎn)擊下方鏈接免費(fèi)領(lǐng)取↓↓，先碼住不迷路~】
          點(diǎn)擊領(lǐng)取→音視頻開(kāi)發(fā)基礎(chǔ)知識(shí)和資料包
          法二 jsmpeg
          將視頻轉(zhuǎn)成ts格式，通過(guò)jsmpeg解碼器進(jìn)行加載播放，可以實(shí)現(xiàn)自動(dòng)播放，實(shí)測(cè)基本上可以解決所有移動(dòng)端無(wú)法播放視頻的問(wèn)題
          轉(zhuǎn)ts
          安裝ffmpeg，輸入命令將mp4轉(zhuǎn)成ts
          • s - 分辨率
          • b - 碼率 b:v代表視頻碼率 b:a代表音頻碼率
          • r - 幀頻
          ffmpeg.exe -i in.mp4 -f mpegts -codec:v mpeg1video -s 680x1080 -b:v 2074k -r 29.97 out.ts
          <!DOCTYPE html>
          <html lang="en">
          <head>
          <meta charset="UTF-8" />
          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>Document</title>
          // 引入jsmpeg
          <script src="./jsmpeg.min.js"></script>
          <style>
          #canvas {
          width: 100%;
          height: 100%;
          }
          </style>
          </head>
          <body>
          <canvas id="canvas" height="750" width="750"></canvas>
          <script>
          var canvas=document.querySelector("#canvas");
          // 加載ts文件
          var player=new JSMpeg.Player("./out.ts", {
          canvas: canvas,
          loop: true, // 循環(huán)播放
          autoplay: true, // 自動(dòng)播放
          audio: false, // 禁用音頻
          });
          player.play();
          </script>
          </body>
          </html>
          其他問(wèn)題
          • 移動(dòng)端自動(dòng)全屏播放視頻
          <video webkit-playsinline="webkit-playsinline" playsinline></video>
          如果你對(duì)音視頻開(kāi)發(fā)感興趣，覺(jué)得文章對(duì)您有幫助，別忘了點(diǎn)贊、收藏哦！或者對(duì)本文的一些闡述有自己的看法，有任何問(wèn)題，歡迎在下方評(píng)論區(qū)討論！
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
狠狠色成人一区二区三区|
色婷婷香蕉在线一区二区|
国产91精品一区二区麻豆网站
|
在线精品动漫一区二区无广告|
福利视频一区二区牛牛|
香蕉一区二区三区观|
国偷自产av一区二区三区|
99精品国产一区二区三区不卡|
波多野结衣一区视频在线|
日韩在线视频一区二区三区|
亚洲国产精品一区二区三区久久
|
亚洲AV无码一区二区三区牲色|
精品日韩一区二区|
精品日本一区二区三区在线观看|
久久青草精品一区二区三区|
久久精品无码一区二区三区不卡
|
久久久久人妻一区精品性色av|
伊人色综合一区二区三区影院视频
|
老熟妇仑乱视频一区二区|
日韩一区二区三区射精|
免费观看一区二区三区|
亚洲性色精品一区二区在线|
亚洲AV无码一区二三区|
91精品国产一区|
亚洲性日韩精品国产一区二区
|
亚洲福利秒拍一区二区|
波多野结衣一区二区三区88|
亚洲AV乱码一区二区三区林ゆな|
国产一区二区在线观看|
中文字幕人妻丝袜乱一区三区
|
亚洲欧洲专线一区|
国产在线精品一区二区高清不卡|
中文激情在线一区二区|
狠狠色婷婷久久一区二区三区|
精品香蕉一区二区三区|
手机看片一区二区|
国产一区二区三区四|
国产一区在线mmai|
久久99国产精品一区二区|
精品乱人伦一区二区|
亚洲a∨无码一区二区|