整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          Web前端開發基礎知識，設置網頁背景圖，如何在網頁中插入圖片
          
        
           
          
	
	
          
		
                        
          片
          一、圖片的表現形式
          當我們在制作頁面的時候，通常會遇到圖片的三種表現形式，如下：
          1、內容圖片
          內容圖片是頁面中真正的內容，沒有內容圖片，就無法完整的理解頁面內容。如淘寶網上的商品展示圖片，這些圖片是網頁的一部分，它們能幫助你決定這個頁面的內容是否是你需要的。
          內容圖片
          2、布局圖片
          布局圖片出現在頁面背景中，要想理解頁面的內容，它們不是必須的。如蘋果官網的這個圖片，沒有這個圖片也能理解頁面上文字描述的內容是什么意思。
          布局圖片
          3、交互圖片
          圖中用紅色框起來的圖片會給你瀏覽頁面的時候帶來一些幫助，如搜索圖片，一看到就知道這里可以搜索想要的東西，購物車圖片可以看到選購的產品，箭頭圖片點擊可以看到更詳細的產品等。
          交互圖片
          二、創建內容圖片
          在HTML中我們用 img 標簽創建圖片，英文是image的縮寫。
          <img src="" alt="">
          內容圖片
          • img是空標簽，沒有結束標簽
          • src屬性的值是一個圖片的URL地址，地址可以是相對路徑，也可以是絕對路徑
          • alt屬性：填寫對這張圖片的簡單描述，增加圖片的可訪問性
          • 圖片應該被存放在單獨的文件夾中，如：images文件夾
          三、創建布局圖片
          布局圖片是在CSS中被創建出來的，使用CSS中的background屬性，如：
          1）background-color 定義背景顏色，設置背景圖片時，要始終設置背景顏色，確保背景圖片沒有成功時會顯示一個背景顏色
          2）background-image 可以指向一個相對路徑或者絕對路徑來添加圖片。
          3）background-repeat可以設置背景是否平鋪在容器中，包含四個關鍵字：
          • background-repeat：repeat 可以設置背景圖片橫向和縱向都平鋪。
          • background-repeat：no-repeat 設置圖片不平鋪，圖片默認顯示在容器的左上角
          • background-repeat：repeat-x 設置圖片只能在橫向平鋪
          • background-repeat：repeat-y 設置圖片只能在縱向平鋪
          4）background-position 屬性可以控制背景圖片顯示在什么位置，包含兩個關鍵字，如：
          background-position：top left 設置圖片顯示在容器的左上角，第一個關鍵字可以是top、center、bottom，第二個關鍵字可以是left、center、right
          CSS中和背景相關的屬性可以簡寫在一行中，如：
          background: #FF1298 url(images/logo.png) center right no-repeat;
          首先是圖片的顏色color，image，position，repeat，CSS屬性能用簡寫就盡量用簡寫，簡寫比分開寫性能更高。
          布局圖片
          四、創建用戶交互圖片
          Web上最常用的三種圖像格式
          1）Jpeg 可以展示一張照片或者復雜圖像
          • 可以表示多達1600萬種顏色，即所有的十六進制顏色
          • 不支持圖像透明
          • 不支持動畫
          • 擴展名為.jpg或.jpeg
          2）png最適合展示網頁插畫、logo和網頁小圖標
          • 可以表示上百萬種不同顏色的圖像
          • 包括png-8、png-24和png-32，取決于想表示多少種顏色
          • 可以設置顏色透明
          • 不支持動畫
          • 擴展名為.png
          3）gif適合展示網頁插畫、logo和網頁小圖標
          • 可以表示最多256種不同顏色
          • 可以設置顏色透明
          • 支持動畫
          • 擴展名是.gif
          建議：
          • 復雜顏色的圖像和照片則要使用jpeg格式
          • 動態圖像要使用gif格式
          • png格式的透明圖片要比gif格式的更平滑
          • 這三種圖像相對于其他格式的圖像文件比較小，適合web頁面高效展示
          一般情況下用戶交互圖片都是一些小圖標，所以使用png或gif作為用戶交互圖片；使用CSS的background屬性以背景圖片的形式為網頁添加用戶交互圖片；推薦把用戶交互圖片放在同一個文件中，可以提高網絡和服務器性能，如：
          交互圖片
          交互圖片
           具體如何操作呢？后續教頭會通過視頻給大家詳細演示，請繼續關注。
          們經常看到許多網站或者H5的動畫都做成了整屏切換的形式，為提高用戶體驗，會在首屏頁面下方放上一個動態的向下箭頭來提示用戶切換至下一屏。
          動態箭頭的效果圖如下：
          那么這種效果是如何實現的呢？
          其實非常簡單，在CSS3中提供了animation屬性，專門用于動畫。要使用這個屬性，需要先了解@keyframes的創建規則，在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。
          在這個動畫中，我們能夠看出在整個動畫中改變的是箭頭的位置，所以我們在創建動畫時，只需要給定箭頭的起始位置，利用animation讓他動起來就可以了。
          接下來，我們一步一步完成。
          1、首先找到你所需要的箭頭圖片，將他利用定位的方式放在首屏的底部。
          a)html代碼（將圖片以背景或者插入圖片的形式放入標簽內，demo以背景形式展示）
          b)css代碼（利用定位將箭頭放在首屏的底部適當位置，網站中大部分情況會進行左右居中）
          2、然后進行動畫創建，最簡單的方式就是只給定初始的以及結束的css樣式即可。
          css 代碼
          標注出來的為動畫的自定義名稱，可以根據你的動畫行為來定義。
          0%為初始狀態，即剛開始動畫時。
          100%為結束狀態，即動畫進行到100%時。
          動畫改變了箭頭的底部位置，由距離底部80像素變到了距離底部0像素。
          3、接下來利用animation屬性讓他具有動畫效果
          css代碼：
          第一個參數表示你所使用的動畫的名稱（即我們創建的動畫的動畫名稱），
          第二個參數表示動畫完成的時間（即由0%到100%所用的時間），
          第三個參數表示動畫執行的次數（可以為任意數字，infinite表示規定動畫無限次播放），因此造成了一個動態的箭頭的視覺效果。
          通過以上三個步驟即可完成這個簡單的動畫效果，很多的動畫效果都可以通過創建動畫的方式來實現。
          原文地址北京市盛世陽光文化傳播有限責任公司：http://www.gonet.com.cn/webduirshow-140.html
          多特效代碼請添加HTML5前端交流群581549454
          廢話不多說，上代碼！
          網站格式代碼
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <style type="text/css">
          * { margin:0; padding:0; }
          body { position:relative; width:100%; height:100%; overflow:hidden; }
          button { color:#222; font-size:20px; padding:5px 20px; width:120px; }
          #btn1 { position:absolute; top:10px; left:10px; }
          #btn2 { position:absolute; top:60px; left:10px; }
          #btn3 { position:absolute; top:110px; left:10px; }
          #btn4 { position:absolute; top:160px; left:10px; }
          #btn5 { position:absolute; top:210px; left:10px; }
          #btn6 { position:absolute; top:260px; left:10px; }
          #btn7 { position:absolute; top:310px; left:10px; }
          #btn8 { position:absolute; top:360px; left:10px; }
          #btn9 { position:absolute; top:410px; left:10px; }
          #btn0 { position:absolute; top:460px; left:10px; }
          </style>
          <script src="js/jquery.min.js"></script>
          <title>漂亮的Canvas鼠標箭頭跟隨動畫特效</title>
          </head>
          <body><script src="/demos/googlegg.js"></script>
          <canvas id="c"></canvas>
          <div class="btn_left;">
           <button id="btn1">效果1</button>
           <button id="btn2">效果2</button>
           <button id="btn3">效果3</button>
           <button id="btn4">效果4</button>
           <button id="btn5">效果5</button>
           <button id="btn6">效果6</button>
           <button id="btn7">效果7</button>
           <button id="btn8">效果8</button>
           <button id="btn9">效果9</button>
           <button id="btn0">效果10</button>
          </div>
          <script type="text/javascript">
           $(document).ready(function() {
           var canvas = document.getElementById("c");
           var ctx = canvas.getContext("2d");
           var c = $("#c");
           var x,y,w,h,cx,cy,l;
           var y = [];
           var b = {
           n:100,
           c:false, // 顏色 如果是false 則是隨機漸變顏色
           bc:'#000', // 背景顏色
           r:0.9,
           o:0.05,
           a:1,
           s:20,
           }
           var bx = 0,by = 0,vx = 0,vy = 0;
           var td = 0;
           var p = 0;
           var hs = 0;
           re();
           var color,color2;
           if(b.c){
           color2 = b.c;
           }else{
           color = Math.random()*360;
           }
           $(window).resize(function(){
           re();
           });
           var tp1=true,tp2 = false,tp3 = false,tp4 = false,tp5 = false,tp6 = false,tp7 = false,tp8 = false,tp9 = false,tp0 = false;
           function begin(){
           if(tp1){
           if(!b.c){
           color+=.1;
           color2 = 'hsl('+color+',100%,80%)';
           }
           ctx.globalAlpha = 1;
           ctx.fillStyle = b.bc;
           ctx.fillRect(0,0,w,h);
           for(var i=0;i<y.length;i++){
           ctx.globalAlpha = y[i].o;
           ctx.fillStyle = color2;
           ctx.beginPath();
           ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);
           ctx.closePath();
           ctx.fill();
           y[i].r+=b.r;
           y[i].o-=b.o;
           if(y[i].o<=0){
           y.splice(i,1);
           i--;
           };
           }
           }else if(tp2){
           if(!b.c){
           color+=.1;
           color2 = 'hsl('+color+',100%,80%)';
           }
           ctx.globalAlpha = 1;
           ctx.fillStyle = b.bc;
           ctx.fillRect(0,0,w,h);
           for(var i=0;i<y.length;i++){
           ctx.globalAlpha = y[i].o;
           ctx.fillStyle = color2;
           ctx.beginPath();
           y[i].r=10;
           ctx.shadowBlur=20;
           ctx.shadowColor=color2;
           ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);
           ctx.closePath();
           ctx.fill();
           ctx.shadowBlur=0;
           y[i].o-=b.o;
           y[i].v+=b.a;
           y[i].y+=y[i].v;
           if(y[i].y>=h+y[i].r || y[i].o<=0){
           y.splice(i,1);
           i--;
           };
           }
           }else if(tp3){
           if(!b.c){
           color+=.1;
           color2 = 'hsl('+color+',100%,80%)';
           }
           td+=5;
           ctx.globalAlpha = 1;
           ctx.fillStyle = b.bc;
           ctx.fillRect(0,0,w,h);
           for(var i=0;i<y.length;i++){
           ctx.globalAlpha = y[i].o;
           ctx.fillStyle = color2;
           ctx.beginPath();
           ctx.shadowBlur=20;
           ctx.shadowColor=color2;
           y[i].r=(1-(y[i].y/h))*20;
           ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);
           ctx.closePath();
           ctx.fill();
           ctx.shadowBlur=0;
           y[i].o=y[i].y/h;
           y[i].v+=b.a;
           y[i].y-=b.s;
           y[i].x+=(Math.cos((y[i].y+td)/100)*10);
           if(y[i].y<=0-y[i].r || y[i].o<=0){
           y.splice(i,1);
           i--;
           };
           }
           }else if(tp4){
           if(!b.c){
           color+=.1;
           color2 = 'hsl('+color+',100%,80%)';
           }
           ctx.globalAlpha = 1;
           ctx.fillStyle = b.bc;
           ctx.fillRect(0,0,w,h);
           for(var i=0;i<y.length;i++){
           ctx.globalAlpha = y[i].o;
           ctx.fillStyle = color2;
           ctx.beginPath();
           ctx.shadowBlur=20;
           ctx.shadowColor=color2;
           y[i].vx2 += (cx - y[i].wx)/1000;
           y[i].vy2 += (cy - y[i].wy)/1000;
           y[i].wx+=y[i].vx2;
           y[i].wy+=y[i].vy2;
           y[i].o-=b.o/2;
           y[i].r=10;
           ctx.arc(y[i].wx,y[i].wy,y[i].r,0,Math.PI*2);
           ctx.closePath();
           ctx.fill();
           ctx.shadowBlur=0;
           if(y[i].o<=0){
           y.splice(i,1);
           i--;
           };
           }
           }else if(tp5){
           if(!b.c){
           color+=.1;
           color2 = 'hsl('+color+',100%,80%)';
           }
           ctx.globalAlpha = .18;
           ctx.fillStyle = b.bc;
           ctx.fillRect(0,0,w,h);
           p+=5;
           ctx.globalAlpha = 1;
           ctx.fillStyle = color2;
           ctx.beginPath();
           ctx.shadowBlur=20;
           ctx.shadowColor=color2;
           ctx.arc(cx+50*Math.cos(p*Math.PI/180),cy+50*Math.sin(p*Math.PI/180),10,0,Math.PI*2);
           ctx.closePath();
           ctx.fill();
           ctx.beginPath();
           ctx.arc(cx+50*Math.cos((p+180)*Math.PI/180),cy+50*Math.sin((p+180)*Math.PI/180),10,0,Math.PI*2);
           ctx.closePath();
           ctx.fill();
           ctx.beginPath();
           ctx.arc(cx+50*Math.cos((p+90)*Math.PI/180),cy+50*Math.sin((p+90)*Math.PI/180),10,0,Math.PI*2);
           ctx.closePath();
           ctx.fill();
           ctx.beginPath();
           ctx.arc(cx+50*Math.cos((p+270)*Math.PI/180),cy+50*Math.sin((p+270)*Math.PI/180),10,0,Math.PI*2);
           ctx.closePath();
           ctx.fill();
           ctx.shadowBlur=0;
           }else if(tp6){
           if(!b.c){
           color+=.1;
           color2 = 'hsl('+color+',100%,80%)';
           }
           ctx.globalAlpha = 0.2;
           ctx.fillStyle = b.bc;
           ctx.fillRect(0,0,w,h);
           for(var i=0;i<y.length;i++){
           ctx.globalAlpha = y[i].o;
           ctx.strokeStyle = color2;
           ctx.beginPath();
           ctx.lineWidth = 2;
           ctx.moveTo(y[i].x,y[i].y);
           ctx.lineTo((y[i].wx+y[i].x)/2+Math.random()*20,(y[i].wy+y[i].y)/2+Math.random()*20);
           ctx.lineTo(y[i].wx,y[i].wy);
           ctx.closePath();
           ctx.stroke();
           y[i].o-=b.o;
           if(y[i].o<=0){
           y.splice(i,1);
           i--;
           };
           }
           }else if(tp7){
           if(!b.c){
           color+=.1;
           color2 = 'hsl('+color+',100%,80%)';
           }
           ctx.globalAlpha = 0.2;
           ctx.fillStyle = b.bc;
           ctx.fillRect(0,0,w,h);
           if(y.length<b.n*2){
           hs = Math.random()*2*Math.PI;
           y.push({x:cx+((Math.random()-.5)*100*Math.cos(hs)),y:cy+((Math.random()-.5)*100*Math.cos(hs)),o:1,h:hs});
           }
           for(var i=0;i<y.length;i++){
           ctx.globalAlpha = y[i].o;
           ctx.fillStyle = color2;
           ctx.beginPath();
           y[i].x+=(cx-y[i].x)/10;
           y[i].y+=(cy-y[i].y)/10;
           ctx.arc(y[i].x,y[i].y,1,0,Math.PI*2);
           ctx.closePath();
           ctx.fill();
           y[i].o-=b.o;
           if(y[i].o<=0){
           y[i].h = Math.random()*2*Math.PI;
           y[i].x = cx+((Math.random()-.5)*100*Math.cos(y[i].h));
           y[i].y = cy+((Math.random()-.5)*100*Math.sin(y[i].h));
           y[i].o = 1;
           };
           }
           }else if(tp8){
           if(!b.c){
           color+=.1;
           color2 = 'hsl('+color+',100%,80%)';
           }
           ctx.globalAlpha = 0.2;
           ctx.fillStyle = b.bc;
           ctx.fillRect(0,0,w,h);
           ctx.fillStyle = color2;
           if(cx%4 == 0){
           cx+=1;
           }else if(cx%4 == 2){
           cx-=1
           }
           else if(cx%4 == 3){
           cx-=2
           }
           if(cy%4 == 0){
           cy+=1;
           }else if(cy%4 == 2){
           cy-=1
           }
           else if(cy%4 == 3){
           cy-=2
           }
           for(var i=cx-60;i<cx+60;i+=4){
           for(var j=cy-60;j<cy+60;j+=4){
           if(Math.sqrt(Math.pow(cx-i,2)+Math.pow(cy-j,2))<=60){
           ctx.globalAlpha = 1-(Math.sqrt(Math.pow(cx-i,2)+Math.pow(cy-j,2))/60);
           if(Math.random()<.2){
           ctx.fillRect(i,j,3,3);
           }
           }
           }
           }
           }else if(tp9){
           if(!b.c){
           color+=.1;
           color2 = 'hsl('+color+',100%,80%)';
           }
           ctx.globalAlpha = 0.2;
           ctx.fillStyle = b.bc;
           ctx.fillRect(0,0,w,h);
           ctx.fillStyle = color2;
           if(cx%4 == 0){
           cx+=1;
           }else if(cx%4 == 2){
           cx-=1
           }
           else if(cx%4 == 3){
           cx-=2
           }
           if(cy%4 == 0){
           cy+=1;
           }else if(cy%4 == 2){
           cy-=1
           }
           else if(cy%4 == 3){
           cy-=2
           }
           if(y.length<b.n){
           y.push({x:cx,y:cy,xv:0,yv:0,o:1});
           }
           for(var i=0;i<y.length;i++){
           if(y[i].xv==0 && y[i].yv==0){
           if(Math.random()<.5){
           if(Math.random()<.5){
           y[i].xv = 3;
           }else{
           y[i].xv = -3;
           }
           }else{
           if(Math.random()<.5){
           y[i].yv = 3;
           }else{
           y[i].yv = -3;
           }
           }
           }else{
           if(y[i].xv == 0){
           if(Math.random()<.66){
           y[i].yv = 0;
           if(Math.random()<.5){
           y[i].xv = 3;
           }else{
           y[i].xv = -3;
           }
           }
           }else if(y[i].yv == 0){
           if(Math.random()<.66){
           y[i].xv = 0;
           if(Math.random()<.5){
           y[i].yv = 3;
           }else{
           y[i].yv = -3;
           }
           }
           }
           }
           y[i].o-=b.o/2;
           ctx.globalAlpha = y[i].o;
           y[i].x+=y[i].xv;
           y[i].y+=y[i].yv;
           ctx.fillRect(y[i].x,y[i].y,3,3);
           if(y[i].o<=0){
           y.splice(i,1);
           i--;
           };
           }
           }else if(tp0){
           if(!b.c){
           color+=.1;
           color2 = 'hsl('+color+',100%,80%)';
           }
           ctx.globalAlpha = 0.2;
           ctx.fillStyle = b.bc;
           ctx.fillRect(0,0,w,h);
           ctx.fillStyle = color2;
           y.push({x:cx,y:cy,xv:2,yv:1,o:1});
           for(var i=0;i<y.length;i++){
           y[i].o-=b.o/10;
           ctx.globalAlpha = y[i].o;
           y[i].x+=(Math.random()-.5)*4;
           y[i].y-=1;
           ctx.fillRect(y[i].x,y[i].y,2,2);
           if(y[i].o<=0){
           y.splice(i,1);
           i--;
           };
           }
           }
           window.requestAnimationFrame(begin);
           }
           function re(){
           w = window.innerWidth;
           h = window.innerHeight;
           canvas.width = w;
           canvas.height = h;
           cx = w/2;
           cy = h/2;
           };
           c.mousemove(function(e){
           cx = e.pageX-c.offset().left;
           cy = e.pageY-c.offset().top;
           if(tp4){
           if(Math.random()<=.5){
           if(Math.random()<=.5){
           bx = -10;
           }else{
           bx = w+10;
           }
           by = Math.random()*h;
           }else{
           if(Math.random()<=.5){
           by = -10;
           }else{
           by = h+10;
           }
           bx = Math.random()*w;
           }
           vx = (Math.random()-.5)*8;
           vy = (Math.random()-.5)*8;
           }
           if(tp1 || tp2 || tp3){
           y.push({x:cx,y:cy,r:b.r,o:1,v:0});
           }else if(tp4){
           y.push({x:cx,y:cy,r:b.r,o:1,v:0,wx:bx,wy:by,vx2:vx,vy2:vy});
           }else if(tp6){
           y.push({x:cx+((Math.random()-.5)*30),y:cy+((Math.random()-.5)*30),o:1,wx:cx,wy:cy});
           }
           });
           /*c.mousedown(function(){
           c.on('mousemove',function(e){
           cx = e.pageX-c.offset().left;
           cy = e.pageY-c.offset().top;
           y.push({x:cx,y:cy,r:b.r,o:1});
           });
           c.on('mouseup',function(){
           c.off('mouseup');
           c.off('mousemove');
           c.off('moseleave');
           });
           c.on('mouseleave',function(){
           c.off('mouseup');
           c.off('mousemove');
           c.off('moseleave');
           });
           });*/
           $("#btn1").click(function(){
           tp1 = true;
           tp2 = false;
           tp3 = false;
           tp4 = false;
           tp5 = false;
           tp6 = false;
           tp7 = false;
           tp8 = false;
           tp9 = false;
           tp0 = false;
           y=[];
           });
           $("#btn2").click(function(){
           tp1 = false;
           tp2 = true;
           tp3 = false;
           tp4 = false;
           tp5 = false;
           tp6 = false;
           tp7 = false;
           tp8 = false;
           tp9 = false;
           tp0 = false;
           y=[];
           });
           $("#btn3").click(function(){
           tp1 = false;
           tp2 = false;
           tp3 = true;
           tp4 = false;
           tp5 = false;
           tp6 = false;
           tp7 = false;
           tp8 = false;
           tp9 = false;
           tp0 = false;
           y=[];
           });
           $("#btn4").click(function(){
           tp1 = false;
           tp2 = false;
           tp3 = false;
           tp4 = true;
           tp5 = false;
           tp6 = false;
           tp7 = false;
           tp8 = false;
           tp9 = false;
           tp0 = false;
           y=[];
           });
           $("#btn5").click(function(){
           tp1 = false;
           tp2 = false;
           tp3 = false;
           tp4 = false;
           tp5 = true;
           tp6 = false;
           tp7 = false;
           tp8 = false;
           tp9 = false;
           tp0 = false;
           y=[];
           });
           $("#btn6").click(function(){
           tp1 = false;
           tp2 = false;
           tp3 = false;
           tp4 = false;
           tp5 = false;
           tp6 = true;
           tp7 = false;
           tp8 = false;
           tp9 = false;
           tp0 = false;
           y=[];
           });
           $("#btn7").click(function(){
           tp1 = false;
           tp2 = false;
           tp3 = false;
           tp4 = false;
           tp5 = false;
           tp6 = false;
           tp7 = true;
           tp8 = false;
           tp9 = false;
           tp0 = false;
           y=[];
           });
           $("#btn8").click(function(){
           tp1 = false;
           tp2 = false;
           tp3 = false;
           tp4 = false;
           tp5 = false;
           tp6 = false;
           tp7 = false;
           tp8 = true;
           tp9 = false;
           tp0 = false;
           y=[];
           });
           $("#btn9").click(function(){
           tp1 = false;
           tp2 = false;
           tp3 = false;
           tp4 = false;
           tp5 = false;
           tp6 = false;
           tp7 = false;
           tp8 = false;
           tp9 = true;
           tp0 = false;
           y=[];
           });
           $("#btn0").click(function(){
           tp1 = false;
           tp2 = false;
           tp3 = false;
           tp4 = false;
           tp5 = false;
           tp6 = false;
           tp7 = false;
           tp8 = false;
           tp9 = false;
           tp0 = true;
           y=[];
           });
           (function() {
           var lastTime = 0;
           var vendors = ['webkit', 'moz'];
           for(var xx = 0; xx < vendors.length && !window.requestAnimationFrame; ++xx) {
           window.requestAnimationFrame = window[vendors[xx] + 'RequestAnimationFrame'];
           window.cancelAnimationFrame = window[vendors[xx] + 'CancelAnimationFrame'] ||
           window[vendors[xx] + 'CancelRequestAnimationFrame'];
           }
           if (!window.requestAnimationFrame) {
           window.requestAnimationFrame = function(callback, element) {
           var currTime = new Date().getTime();
           var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
           var id = window.setTimeout(function() {
           callback(currTime + timeToCall);
           }, timeToCall);
           lastTime = currTime + timeToCall;
           return id;
           };
           }
           if (!window.cancelAnimationFrame) {
           window.cancelAnimationFrame = function(id) {
           clearTimeout(id);
           };
           }
           }());
           begin();
           });
          </script>
          </body>
          </html>
          JS代碼過多沒有在這里展示，大家可在群內查找
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国产日韩视频一区|
国产精品被窝福利一区|
国产一区二区三区电影|
亚洲av鲁丝一区二区三区|
中文字幕亚洲一区二区三区|
国产高清一区二区三区四区|
日韩一区二区在线视频|
亚洲精品色播一区二区|
人妻无码一区二区视频|
国产无人区一区二区三区|
一区二区三区在线免费|
红杏亚洲影院一区二区三区|
中文字幕VA一区二区三区|
免费看一区二区三区四区|
国产精品丝袜一区二区三区|
日韩精品中文字幕无码一区|
综合无码一区二区三区四区五区
|
无码精品人妻一区|
国产午夜福利精品一区二区三区
|
国产精品亚洲专区一区|
精品国产一区二区三区在线观看
|
无码乱人伦一区二区亚洲一|
一区二区亚洲精品精华液|
一区二区三区四区电影视频在线观看
|
国产高清在线精品一区小说|
无码一区二区三区免费|
国产成人久久一区二区不卡三区|
日本在线观看一区二区三区|
国产另类ts人妖一区二区三区|
91久久精品午夜一区二区|
大香伊蕉日本一区二区|
久久国产午夜一区二区福利|
国产未成女一区二区三区|
插我一区二区在线观看|
骚片AV蜜桃精品一区|
一区二区三区中文字幕|
精品无人乱码一区二区三区|
亚洲无线码在线一区观看|
波多野结衣在线观看一区
|
国产精品伦子一区二区三区|
亚洲无圣光一区二区|