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 久久精品国产线看观看亚洲,成人精品一区二区www,成人欧美一区二区三区黑人3p 

      

        

          



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

          


          
	

          

 

          
  
          
    
          
      
          
        
          HTML5焦點(diǎn)圖片波浪過渡效果切換動(dòng)畫特效源碼
          
        
           
          
	
	
          
		HTML5焦點(diǎn)圖片波浪過渡效果切換動(dòng)畫特效源碼
          
                        
          果圖
          各位觀眾大家好，今天給大家?guī)淼氖?/p>
          HTML5焦點(diǎn)圖片波浪過渡效果切換動(dòng)畫特效
          是不是很炫酷！
          代碼過長需要文檔版源碼來我的前端群581549454，已上傳到群文件
          廢話不多說上源碼
          網(wǎng)站樣式源碼：
          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>HTML5焦點(diǎn)圖片波浪過渡效果切換動(dòng)畫特效</title>
          <style>
          * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
          }
          .parent {
           width: 681px;
           height: 384px;
           top: 0;
           bottom: 0;
           left: 0;
           right: 0;
           margin: auto auto;
           overflow: hidden;
           position: absolute;
           -webkit-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
           -moz-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
           box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
          }
          svg {
           position: absolute;
           z-index: 1;
           width: 681px;
           height: 384px;
          }
          button {
           position: absolute;
           z-index: 50;
           width: 40px;
           overflow: hidden;
           height: 40px;
           border: none;
           border-radius: 50%;
           background: #fff;
           cursor: pointer;
           -webkit-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
           -moz-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
           box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
          }
          button:focus {
           outline-width: 0;
          }
          circle {
           stroke: #fff;
           fill: none;
           transition: 0.3s;
          }
          #svg1 circle {
           transition-timing-function: linear;
          }
          #svg2 circle {
           transition-timing-function: linear;
          }
          #Capa_1 {
           position: absolute;
           width: 16px;
           height: 16px;
           transform: translate(-7px, -8px);
          }
          #Capa_2 {
           position: absolute;
           width: 16px;
           height: 16px;
           transform: translate(-9px, -8px);
          }
          .right {
           margin-left: 628px;
           margin-top: 168px;
           border: 1px solid #849494;
           background-color: transparent;
           transition: .5s;
          }
          .right:hover {
           background-color: #fff;
          }
          .left {
           margin-left: 0.5%;
           margin-top: 6.17%;
           border: 1px solid #849494;
           background-color: transparent;
           transition: .5s;
          }
          .left:hover {
           background-color: #fff;
          }
          .circle1 {
           transition-delay: 0.05s;
          }
          .circle2 {
           transition-delay: 0.1s;
          }
          .circle3 {
           transition-delay: 0.15s;
          }
          .circle4 {
           transition-delay: 0.2s;
          }
          .circle5 {
           transition-delay: 0.25s;
          }
          .circle6 {
           transition-delay: 0.3s;
          }
          .circle7 {
           transition-delay: 0.35s;
          }
          .circle8 {
           transition-delay: 0.4s;
          }
          .circle9 {
           transition-delay: 0.45s;
          }
          .circle10 {
           transition-delay: 0.05s;
          }
          .circle11 {
           transition-delay: 0.1s;
          }
          .circle12 {
           transition-delay: 0.15s;
          }
          .circle13 {
           transition-delay: 0.2s;
          }
          .circle14 {
           transition-delay: 0.25s;
          }
          .circle15 {
           transition-delay: 0.3s;
          }
          .circle16 {
           transition-delay: 0.35s;
          }
          .circle17 {
           transition-delay: 0.4s;
          }
          .circle18 {
           transition-delay: 0.45s;
          }
          .slide1 {
           background-image: url("img/1.jpg");
          }
          .slide2 {
           background-image: url("img/2.jpg");
          }
          .slide3 {
           background-image: url("img/3.jpg");
          }
          .slide4 {
           background-image: url("img/4.jpg");
          }
          .slider {
           position: absolute;
           width: 400%;
           height: 100%;
           background: #000;
           display: inline-flex;
           overflow: hidden;
          }
          .slide1,
          .slide2,
          .slide3,
          .slide4 {
           position: absolute;
           background-position: center;
           background-size: cover;
           color: #fff;
           font-size: 62px;
           padding-top: 138px;
           font-weight: 800;
           font-family: 'Heebo', sans-serif;
           text-align: center;
           width: 25%;
           height: 100%;
           z-index: 10;
           transition: 1.4s;
          }
          .tran {
           transform: scale(1.3);
          }
          .up1 {
           z-index: 20;
          }
          .up2 {
           z-index: 40;
          }
          .steap {
           stroke-width: 0;
          }
          .streak {
           stroke-width: 82px;
          }
          @media (max-width: 700px) {
           .parent {
           margin-left: 1%;
           }
          }
          </style>
          </head>
          <body><script src="/demos/googlegg.js"></script>
          <div class='parent'>
           <div class='slider'>
           <button type="button" id='right' class='right' name="button">
           <svg version="1.1" id="Capa_1" width='40px' height='40px ' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
           viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;" xml:space="preserve">
           <g>
           <path style='fill: #9d9d9d;' d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5
           c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z
           ">
           </g>
           </svg>
           </button>
           <button type="button" id='left' class='left' name="button">
           <svg version="1.1" id="Capa_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
           viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;" xml:space="preserve">
           <g>
           <path style='fill: #9d9d9d;' d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225
           c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z">
           </g>
           </svg>
           </button>
           <svg id='svg2' class='up2' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
           <circle id='circle1' class='circle1 steap' cx="34px" cy="49%" r="20" />
           <circle id='circle2' class='circle2 steap' cx="34px" cy="49%" r="100" />
           <circle id='circle3' class='circle3 steap' cx="34px" cy="49%" r="180" />
           <circle id='circle4' class='circle4 steap' cx="34px" cy="49%" r="260" />
           <circle id='circle5' class='circle5 steap' cx="34px" cy="49%" r="340" />
           <circle id='circle6' class='circle6 steap' cx="34px" cy="49%" r="420" />
           <circle id='circle7' class='circle7 steap' cx="34px" cy="49%" r="500" />
           <circle id='circle8' class='circle8 steap' cx="34px" cy="49%" r="580" />
           <circle id='circle9' class='circle9 steap' cx="34px" cy="49%" r="660" />
           </svg>
           <svg id='svg1' class='up2' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
           <circle id='circle10' class='circle10 steap' cx="648px" cy="49%" r="20" />
           <circle id='circle11' class='circle11 steap' cx="648px" cy="49%" r="100" />
           <circle id='circle12' class='circle12 steap' cx="648px" cy="49%" r="180" />
           <circle id='circle13' class='circle13 steap' cx="648px" cy="49%" r="260" />
           <circle id='circle14' class='circle14 steap' cx="648px" cy="49%" r="340" />
           <circle id='circle15' class='circle15 steap' cx="648px" cy="49%" r="420" />
           <circle id='circle16' class='circle16 steap' cx="648px" cy="49%" r="500" />
           <circle id='circle17' class='circle17 steap' cx="648px" cy="49%" r="580" />
           <circle id='circle18' class='circle18 steap' cx="648px" cy="49%" r="660" />
           </svg>
           <div id='slide1' class='slide1 up1'>MOUNTAIN</div>
           <div id='slide2' class='slide2'>BEACH</div>
           <div id='slide3' class='slide3'>FOREST</div>
           <div id='slide4' class='slide4'>DESERT</div>
           </div>
          </div><script>
           var curpage=1;
           var sliding=false;
           var click=true;
           var left=document.getElementById('left');
           var right=document.getElementById('right');
           var pagePrefix='slide';
           var pageShift=500;
           var transitionPrefix='circle';
           var svg=true;
           function leftSlide() {
           if (click) {
           if (curpage==1) curpage=5;
           console.log('woek');
           sliding=true;
           curpage--;
           svg=true;
           click=false;
           for(k=1;k<=4;k++){
           var a1=document.getElementById(pagePrefix + k);
           a1.className +=' tran';
           }
           setTimeout(()=>{
           move();
           },200);
           setTimeout(()=>{
           for(k=1;k<=4;k++){
           var a1=document.getElementById(pagePrefix + k);
           a1.classList.remove('tran');
           };
           },1400);
           }
           }
           function rightSlide() {
           if (click) {
           if (curpage==4) curpage=0;
           console.log('woek');
           sliding=true;
           curpage++;
           svg=false;
           click=false;
           for(k=1;k<=4;k++){
           var a1=document.getElementById(pagePrefix + k);
           a1.className +=' tran';
           }
           setTimeout(()=>{
           move();
           },200);
           setTimeout(()=>{
           for(k=1;k<=4;k++){
           var a1=document.getElementById(pagePrefix + k);
           a1.classList.remove('tran');
           };
           },1400);
           }
           }
           function move() {
           if (sliding) {
           sliding=false;
           if (svg) {
           for (j=1; j <=9; j++) {
           var c=document.getElementById(transitionPrefix + j);
           c.classList.remove("steap");
           c.setAttribute("class", (transitionPrefix + j) + " streak")
           console.log('streak');
           }
           } else {
           for (j=10; j <=18; j++) {
           var c=document.getElementById(transitionPrefix + j);
           c.classList.remove("steap");
           c.setAttribute("class", (transitionPrefix + j) + " streak")
           console.log('streak');
           }
           }
           // for(k=1;k<=4;k++){
           // var a1=document.getElementById(pagePrefix + k);
           // a1.className +=' tran';
           // }
           setTimeout(()=> {
           for (i=1; i <=4; i++) {
           if (i==curpage) {
           var a=document.getElementById(pagePrefix + i);
           a.className +=' up1';
           } else {
           var b=document.getElementById(pagePrefix + i);
           b.classList.remove("up1");
           }
           };
           sliding=true;
           }, 600);
           setTimeout(()=> {
           click=true;
           }, 1700);
           setTimeout(()=> {
           if (svg) {
           for (j=1; j <=9; j++) {
           var c=document.getElementById(transitionPrefix + j);
           c.classList.remove("streak");
           c.setAttribute("class", (transitionPrefix + j) + " steap");
           }
           } else {
           for (j=10; j <=18; j++) {
           var c=document.getElementById(transitionPrefix + j);
           c.classList.remove("streak");
           c.setAttribute("class", (transitionPrefix + j) + " steap");
           }
           sliding=true;
           }
           }, 850);
           setTimeout(()=> {
           click=true;
           }, 1700);
           }
           }
           left.onmousedown=()=>{
           leftSlide();
           }
           right.onmousedown=()=>{
           rightSlide();
           }
           document.onkeydown=(e)=>{
           if(e.keyCode==37){
           leftSlide();
           }
           else if (e.keyCode==39) {
           rightSlide();
           }
           }
          //for codepen header
          setTimeout(()=>{
           rightSlide();
          },500)
          </script>
          <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
          </div>
          </body>
          </html>
          anvas loaders
          告別一成不變的等待圖標(biāo)，HTML5/canvas 制作等待圖標(biāo)
          在見多了各種單調(diào)，單色的loaders之后，再看這些圖標(biāo)是不是感覺很靚呢？雖然這些圖標(biāo)的制作在某些程度上會(huì)損失掉一點(diǎn)性能，但是如果放在個(gè)人博客上那也是沒問題的，而且可以讓自己的博客更加的吸引人，這是基于HTML5/canvas畫布上的小案例，當(dāng)然核心還是javascript，雖然現(xiàn)在HTML5很火，但是大部分特效還是要配合javascript來使用，我發(fā)過很多純HTML5/css3的動(dòng)畫，但是明眼人都知道，一般企業(yè)里不會(huì)用純HTML5去寫網(wǎng)站，往往用純html5解決特效可能需要2000行代碼量，但是如果配合javascript的話，只需要一百來行的代碼，減少了很大的工作量，所以我一直強(qiáng)調(diào)，現(xiàn)在核心是學(xué)好原生javascript，再去學(xué)jquery以及其他插件，框架。這才是一個(gè)正常的學(xué)習(xí)順序！我頭條號(hào)里還有許多的特效，以及企業(yè)級(jí)項(xiàng)目，歡迎關(guān)注！
          HTML5/javascript loaders源碼

          代碼過長需要文檔版源碼來我的前端群570946165，源碼已經(jīng)上傳了！
          需要更多的web前端企業(yè)級(jí)特效，學(xué)習(xí)方法，敬請(qǐng)關(guān)注本頭條號(hào)！
          HTML5實(shí)現(xiàn)分片上傳GB級(jí)大文件源代碼，用HTML5實(shí)現(xiàn)分片上傳GB級(jí)大文件代碼，用HTML5實(shí)現(xiàn)分片上傳GB級(jí)大文件源碼，用HTML5實(shí)現(xiàn)分片上傳GB級(jí)大文件組件，用HTML5實(shí)現(xiàn)分片上傳GB級(jí)大文件控件，用HTML5實(shí)現(xiàn)分片上傳GB級(jí)大文件方案，用HTML5實(shí)現(xiàn)分片上傳GB級(jí)大文件技術(shù)，用HTML5實(shí)現(xiàn)分片上傳GB級(jí)大文件軟件，用HTML5實(shí)現(xiàn)分片上傳GB級(jí)大文件服務(wù)，用javascript實(shí)現(xiàn)分片上傳GB級(jí)大文件源代碼，用js實(shí)現(xiàn)分片上傳GB級(jí)大文件源代碼，用vue2實(shí)現(xiàn)分片上傳GB級(jí)大文件源代碼，用vue3實(shí)現(xiàn)分片上傳GB級(jí)大文件源代碼，
          用戶上傳的文件比較大，有20G左右，直接用HTML傳的話容易失敗，服務(wù)器也容易出錯(cuò)，需要分片，分塊，分割上傳。也就是將一個(gè)大的文件分成若干個(gè)小文件塊來上傳，另外就是需要實(shí)現(xiàn)秒傳功能和防重復(fù)功能，秒傳就是用戶如果上傳過這個(gè)文件，那么直接在數(shù)據(jù)庫中查找記錄就行了，不用再上傳一次，節(jié)省時(shí)間，實(shí)現(xiàn)的思路是對(duì)文件做MD5計(jì)算，將MD5值保存到數(shù)據(jù)庫，算法可以用MD5，或者CRC，或者SHA1，這個(gè)隨便哪個(gè)算法都行。
          分片還需要支持?jǐn)帱c(diǎn)續(xù)傳，現(xiàn)在HTML5雖然提供了信息記錄功能，但是只支持到了會(huì)話級(jí)，也就是用戶不能關(guān)閉瀏覽器，也不能清空緩存。但是有的政府單位上傳大文件，傳了一半下班了，明天繼續(xù)傳，電腦一關(guān)結(jié)果進(jìn)度信息就丟失了，這個(gè)是他們的一個(gè)痛點(diǎn)。
          切片的話還有一點(diǎn)就是在服務(wù)器上合并，一個(gè)文件的所有分片數(shù)據(jù)上傳完后需要在服務(wù)器端進(jìn)行合并操作。
          功能的話支持20G文件上傳和續(xù)傳，支持秒傳，支持文件夾上傳，支持在服務(wù)端保存文件夾層級(jí)結(jié)構(gòu)，支持將文件夾層級(jí)結(jié)構(gòu)信息保存到數(shù)據(jù)庫中，支持下載時(shí)能夠?qū)⑽募A層級(jí)結(jié)構(gòu)下載下來，支持下載文件夾，下載文件夾支持?jǐn)帱c(diǎn)續(xù)傳，支持VUE2,VUE3,React，支持IE，Chrome和信創(chuàng)國產(chǎn)化環(huán)境，比如銀河麒麟，統(tǒng)信UOS，龍芯，支持加密傳輸，包括加密上傳，加密下載，加密算法支持國密SM4，支持云對(duì)象存儲(chǔ)，比如華為云，阿里云，騰訊云，七牛云，AWS，MinIO,FastDFS，需要提供手機(jī)，QQ，微信，郵箱等聯(lián)系方式，提供7*24小時(shí)技術(shù)支持，提供長期技術(shù)支持和維護(hù)服務(wù)，提供遠(yuǎn)程1對(duì)1技術(shù)指導(dǎo)，提供二次開發(fā)指導(dǎo)，提供文檔教程，提供視頻教程。
          1.下載示例
          https://gitee.com/xproer/up6-vue-cli


          將up6組件復(fù)制到項(xiàng)目中
          示例中已經(jīng)包含此目錄


          1.引入up6組件


          2.配置接口地址
          接口地址分別對(duì)應(yīng)：文件初始化，文件數(shù)據(jù)上傳，文件進(jìn)度，文件上傳完畢，文件刪除，文件夾初始化，文件夾刪除，文件列表
          參考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de


          3.處理事件


          啟動(dòng)測(cè)試


          啟動(dòng)成功


          效果


          數(shù)據(jù)庫
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
午夜无码一区二区三区在线观看
|
亚洲av成人一区二区三区观看在线|
国产成人精品一区二三区在线观看|
免费无码AV一区二区|
午夜精品一区二区三区在线视
|
成人无码AV一区二区|
午夜福利一区二区三区在线观看|
国产suv精品一区二区33|
精品亚洲AV无码一区二区三区|
亚洲综合av一区二区三区|
男人的天堂亚洲一区二区三区|
国产精品一区三区|
精品永久久福利一区二区|
国产欧美一区二区精品仙草咪
|
国产伦精品一区二区三区免费下载
|
亚洲日韩中文字幕一区|
色一情一乱一伦一区二区三区日本
|
国产一区二区不卡在线播放|
亚洲av日韩综合一区在线观看|
亚洲日韩AV一区二区三区中文|
亚洲国产成人久久综合一区77|
无码人妻一区二区三区免费n鬼沢
无码人妻一区二区三区免费看
|
亚洲国产成人一区二区三区|
人妻内射一区二区在线视频|
日本内射精品一区二区视频|
天美传媒一区二区三区|
亚洲综合av永久无码精品一区二区
|
亚洲美女一区二区三区|
国产一区二区三区在线电影|
国产精品一区二区久久不卡|
成人精品视频一区二区|
日本一区午夜艳熟免费|
在线观看视频一区二区|
少妇无码一区二区三区|
日韩精品一区二区三区视频|
亚洲综合在线成人一区|
好爽毛片一区二区三区四|
久久精品日韩一区国产二区
|
无码国产精品一区二区免费式影视|
国产亚洲福利精品一区二区|
2020天堂中文字幕一区在线观|