JS三教九流系列-jquery實例開發到插件封裝2

時間  2019-11-06
標籤 三教九流 系列 jquery 實例 開發 插件 封裝 欄目 JavaScript 简体版
原文   原文鏈接

咱們先寫實例，而後有必要在分裝爲插件，最後作更高級的處理！javascript

封裝插件基礎學習 http://my.oschina.net/u/2352644/blog/487688css

前面的7個實例在這裏 http://my.oschina.net/u/2352644/blog/490827html

效果目錄：html5

8.商品數量加減效果java

9.星星評分效果jquery

10.刮刮卡效果css3

11.圓形大轉盤抽獎效果web

12.貪食蛇小遊戲效果canvas

13.video的html5視頻播放器api

14.可拖拽的登錄框

15.樹形菜單效果

16.全選/反全選處理

17.瀑布流效果（未實現） 

 

8.商品數量加減效果

這個效果，咱們在看淘寶提交的時候，就會選擇購買數量，很簡單常見效果

 廢話很少說，已經作了7個效果，咱們直接來佈局靜態結構：

<!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" />
<title>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
//end
});
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
.num{ margin:100px;}
.num input{ height:30px; border:1px solid #ccc;}
.numinc,.numadd{ width:30px; text-align:center;}
.numshou{ width:100px; text-align:center;}
</style>
</head>
<body>
 <div class="num">
     <input type="button" class="numinc" value="-" />
     <input type="text" class="numshou" value="1"/>
        <input type="button" class="numadd" value="+" />
      
    </div>
</body>
</html>

咱們接下來給加減按鈕添加事件，作出處理：

最小數量爲1.做爲臨界值

<!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" />
<title>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
$(".numinc").click(function(){
 if($(".numshou").val()<=1){
  $(".numshou").val(1);
 }else{
  $(".numshou").val(parseInt($(".numshou").val())-1);
 };
 
});
$(".numadd").click(function(){
 $(".numshou").val(parseInt($(".numshou").val())+parseInt(1));
});
//end
});
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
.num{ margin:100px;}
.num input{ height:30px; border:1px solid #ccc;}
.numinc,.numadd{ width:30px; text-align:center;}
.numshou{ width:100px; text-align:center;}
</style>
</head>
<body>
 <div class="num">
     <input type="button" class="numinc" value="-" />
     <input type="text" class="numshou" value="1"/>
        <input type="button" class="numadd" value="+" />
      
    </div>
</body>
</html>

9.星星評分效果

給商品打分，點擊到哪一個，當前和之前都被選中，咱們看代碼：

<!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" />
<title>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
$(".ping").children().click(function(){
 var i=$(this).index();
 $(".ping").children().each(function(index, element) {
        if(index<=i){
   $(this).addClass("add");
  }else{
   $(this).removeClass("add");
  };
    });
 
});
//end
});
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
.ping{ margin:100px; height:30px;}
.ping span{ float:left; height:20px; width:20px; margin:5px; background:#666; cursor:pointer;}
.ping span.add{ background:#C93;}
</style>
</head>
<body>
 <div class="ping">
     <span class="add"></span>
        <span class="add"></span>
        <span></span>
        <span></span>
        <span></span>      
    </div>
</body>
</html>

10.刮刮卡效果

刮刮卡是基礎canvas的，

原理就是用帶有顏色canvas蓋住下面的獎項，咱們去讓canvas透明，顯示出下面內容

用到對canvas的全局屬性設置爲原內容和後加內容相加變透明屬性處理

globalCompositeOperation="destination-out";

直接代碼處理：

<!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" />
<title>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
var cjcon=["一等獎","二等獎","三等獎","謝謝參與"];//獎項設置
var cjper=[3,10,20,100];//獎項率，次數
/*
 * sjmes
 * @Author 透筆度（1530341234@qq.com）              
 * @param {cjcon}      全部獎項     
 */
var percjcon=[];
for(var i=0;i<cjper.length;i++){
 peic(cjper[i],i);
};
function peic(len,ind){
 for(var i=0;i<len;i++){
  percjcon.push(cjcon[ind]);
 }; 
};
var sjmes = $("#sjmes");
var numrandom=Math.floor(Math.random()*percjcon.length);
sjmes.html(percjcon[numrandom]);
var opacityb=0.5;//透明百分比,參考值,什麼程度出現提示
var backcolorb="#ffaaaa";
var numl=200*80;//總像素個數
var nump;//出現backcolorb的個數
var opacitya;//透明百分比實際值
var canvas = $("#canvas")[0];  //獲取canvas   
var context = canvas.getContext('2d');  //canvas追加2d畫圖
var flag = 0;  //標誌，判斷是按下後移動仍是未按下移動 重要
var penwidth=20; //畫筆寬度
context.fillStyle="#faa";  //填充的顏色
context.fillRect(0,0,200,80);  //填充顏色 x y座標 寬 高
canvas.addEventListener('mousemove', onMouseMove, false); //鼠標移動事件 
canvas.addEventListener('mousedown', onMouseDown, false);  //鼠標按下事件 
canvas.addEventListener('mouseup', onMouseUp, false);  //鼠標擡起事件 
var movex=-1;
var movey=-1;
var imgData;//imagedada容器
var rgbabox=[];//存放讀取後的rgba數據；
function onMouseMove(evt) {
 if (flag == 1) {  
  movex=evt.layerX;
  movey=evt.layerY;  
     context.fillStyle="#FF0000";
  context.beginPath();
  context.globalCompositeOperation="destination-out";
  context.arc(movex,movey,penwidth,0,Math.PI*2,true); //Math.PI*2是JS計算方法，是圓  
  context.closePath();
  context.fill();
 }  
}  
function onMouseDown(evt) {  
  flag = 1;  //標誌按下
}  
function onMouseUp(evt) {  
 flag = 0;
    //讀取像素數據
 imgData=context.getImageData(0,0,200,80);//獲取當前畫布數據
 //imgData.data.length 獲取圖片數據總長度，沒4個爲一組存放rgba
 for(var i=0; i<imgData.data.length;i+=4){
  var rval=imgData.data[i];
  var gval=imgData.data[i+1];
  var bval=imgData.data[i+2];
  var aval=imgData.data[i+3];
  var rgbaval=rval+"-"+gval+"-"+bval+"-"+aval;
  rgbabox.push(rgbaval);
 }
 //end
 for(var j=0;j<rgbabox.length;j++){
  //alert(rgbabox[j].split("-")[0])
  rgbabox[j]='#'+rgbToHex(rgbabox[j].split("-")[0],rgbabox[j].split("-")[1],rgbabox[j].split("-")[2]);  
 }
 nump=countSubstr(rgbabox.join(","),backcolorb,true);
 opacitya=(numl-nump)/numl;
 if(opacitya>opacityb){
  alert("恭喜你得到"+percjcon[numrandom])
 }else{}
 
} 
function rgbToHex(r, g, b) { return ((r << 16) | (g << 8) | b).toString(16); }//rgb轉爲16進制 #xxx形式
function countSubstr(str,substr,isIgnore){//計算字符串出現子字符串的個數
 var count;
 var reg="";
 if(isIgnore==true){
 reg="/"+substr+"/gi"; 
 }else{
 reg="/"+substr+"/g";
 }
 reg=eval(reg);
 if(str.match(reg)==null){
 count=0;
 }else{
 count=str.match(reg).length;
 }
 return count;
}
//end
});
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
.cjbox{ margin:100px; height:80px; width:200px; background:#FFF; position:relative;}
#canvas{position:absolute; left:0px; top:0px;z-index:99;}
.sjmes{ position:absolute; left:0px; top:0px; height:80px; width:200px; text-align:center; font-size:40px; line-height:80px; z-index:9;}
</style>
</head>
<body>
<div style="position:relative; margin:20px 100px; background:#0CF; height:400px; width:500px; margin:0 auto;">
 <div>刮刮卡簡單抽獎</div>
    <div class="cjbox">
     <div class="sjmes" id="sjmes"></div>
        <canvas width=200 height=80 id="canvas"></canvas> 
    </div>
</div> 
</body>
</html>

11.圓形大轉盤抽獎效果

咱們已經作了九宮格大裝盤，其實原理相似，這個是利用css3的2d旋轉，轉動中間的帶指針圖片

原理是元素transform-origin:center center;transform:rotate(0deg);的處理

我就不用圖了，以避免測試麻煩，

代碼以下：

<!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" />
<title>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
 var set;//存放間隔函數id，用於清除動畫 
 var i=0;//初始位置，
 var speed=10;//轉動速度
 var ok=Math.floor((Math.random()*361));//產生0-360度的整數，標記中獎位置
 var okw=null;
 if(ok>=0 && ok<30){
  okw="1"
 }else if(ok>=30 && ok<60){
  okw="2"
 }
 else if(ok>=60 && ok<90){
  okw="3"
 }
 else if(ok>=90 && ok<120){
  okw="4"
 }
 else if(ok>=120 && ok<150){
  okw="5"
 }
 else if(ok>=150 && ok<180){
  okw="6"
 }
 else if(ok>=180 && ok<210){
  okw="7"
 }
 else if(ok>=210 && ok<240){
  okw="8"
 }
 else if(ok>=270 && ok<300){
  okw="9"
 }
 else if(ok>=300 && ok<330){
  okw="10"
 }
 else if(ok>=330 && ok<=360){
  okw="11"
 }
 else{
  okw="12"
 }
 var count=5*360+ok;//總圈數，一圈是360度
 var nowcount=0;//當前的圈數
 function dong(){
  if(nowcount>count){
   clearInterval(set);
   alert("恭喜你，中了"+okw+"等獎")
  }else{   
   nowcount+=10;
   $(".start").css('transform','rotate('+i+'deg)')
   i+=10;
  };  
  
 }; 
 $(".start").click(function(){
  set=setInterval(dong,speed);
 });
//end
});
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
#lottery{width:400px;height:400px;margin:20px auto 0; position:relative;}
#lottery div{width:100px;height:100px;text-align:centerfont-size:24px;color:#333; float:left;}
#lottery .cent{ background:#FFF;}
#lottery .lottery-unit-0{ background:#CC6;}
#lottery .lottery-unit-1{ background:#F99;}
#lottery .lottery-unit-2{ background:#CC6;}
#lottery .lottery-unit-3{ background:#F99;}
#lottery .lottery-unit-4{ background:#CC6;}
#lottery .lottery-unit-5{ background:#F99;}
#lottery .lottery-unit-6{ background:#CC6;}
#lottery .lottery-unit-7{ background:#F99;}
#lottery .lottery-unit-8{ background:#CC6;}
#lottery .lottery-unit-9{ background:#F99;}
#lottery .lottery-unit-10{ background:#CC6;}
#lottery .lottery-unit-11{ background:#F99;}
#lottery div.select{background:#F0F;}
#lottery .start{ position:absolute; left:100px; top:100px; height:200px; width:200px;background:#C33; font-size:30px; text-align:center; cursor:pointer; line-height:200px; color:#fff; border-radius:100px;
transform-origin:center center;transform:rotate(0deg);
}
#lottery .start span{ height:20px; width:80px;background:#C33; position:absolute; left:200px; top:90px; z-index:9999}
</style>
</head>
<body>
<div id="lottery">
   
   <div class="lottery-unit lottery-unit-0">8</div>
   <div class="lottery-unit lottery-unit-1">9</div>
   <div class="lottery-unit lottery-unit-2">10</div>
            <div class="lottery-unit lottery-unit-3">11</div>
            
            <div class="lottery-unit lottery-unit-11">7</div>            
            <div class="cent"></div>
            <div class="cent"></div>            
            <div class="lottery-unit lottery-unit-4">12</div>
            
            <div class="lottery-unit lottery-unit-10">6</div>            
            <div class="cent"></div>
            <div class="cent"></div>            
            <div class="lottery-unit lottery-unit-5">1</div>
        
   <div class="lottery-unit lottery-unit-9">5</div>
   <div class="lottery-unit lottery-unit-8">4</div>
   <div class="lottery-unit lottery-unit-7">3</div>
            <div class="lottery-unit lottery-unit-6">2</div>
 
   <div class="start">抽獎
             <span></span>
            </div>
</div>
</body>
</html>

 12.貪食蛇小遊戲效果

這個原理我就按步驟分析，最後放總的代碼

咱們要有一個舞臺，存放貪食蛇還有食物，咱們先有基本的html結構

<canvas id="canvas" width="450" height="450"></canvas>

接下來咱們jq獲取canvas和添加2d畫布，

//獲取canvas基本信息
 var canvas = $("#canvas")[0];
 var ctx = canvas.getContext("2d");
 var w = $("#canvas").width();
 var h = $("#canvas").height();

咱們想象一下，一條蛇放在畫布上，是有若干個矩形組成，看到多個，咱們就知道是存放在數組裏，數組裏的每一項還要存放蛇的位置信息（x y座標），一樣矩形的的寬度咱們要提早設置，還有開始蛇的方向，

//建立貪吃蛇對象
 var snake_array; //由一個數組組成 
 //設置遊戲變量
 var cw = 10;//單元格像素寬度
 //其餘變量設置
 var d;//方向

咱們還須要一個矩形，表示食物，只有一個，咱們存入一個變量就好，還有就是每次吃完的分數記錄

var food;//食物
 var score;//統計分數

接下來咱們開始畫出蛇，咱們爲了簡單，蛇就初始爲5個，在左上角位置，開始的話就往右走

建立一條橫向，5節長度的蛇，座標的話就是[{4,0}，{3,0}，{2,0}，{1,0}，{0,0}],第一項是蛇頭，由於蛇頭是最須要掌握的，

//建立蛇對象 函數
 function create_snake()
 {
  var length = 5; //設置初始貪吃蛇長度
  snake_array = []; //清空數組
  for(var i = length-1; i>=0; i--)//讓蛇頭處在向右，第一行第四個格
  {
   //在左上方建立水平的貪吃蛇
   snake_array.push({x: i, y:0});//[{4,0}，{3,0}，{2,0}，{1,0}，{0,0}]
  }
 }

咱們要建立食物，這個要隨機出現，位置在畫布內部

//建立食物函數
 function create_food()
 {
  food = {
   x: Math.round(Math.random()*(w-cw)/cw), 
   //450之內隨機數，保證在畫布內
   y: Math.round(Math.random()*(h-cw)/cw), 
  };
  //在屏幕內隨機產生座標點
 }

蛇和食物有了，咱們要繪製出來，在畫布上，咱們繪製處理，包含在一個函數裏

function paint()
 { }

 下面的處理都是函數內部，繪製蛇頭，根據方向作出改變，

//在每一幀圖畫中都必須首先清除上一幀內容。
  //清屏，即以底色填充canvas
  ctx.fillStyle = "#faa";
  ctx.fillRect(0, 0, w, h);
  //貪吃蛇運動邏輯：將貪吃蛇的尾部點放到頭部
  //獲取貪吃蛇頭部的位置信息
  var nx = snake_array[0].x;
  var ny = snake_array[0].y;
  //根據貪吃蛇的運動方向計算最新頭部的座標信息
  if(d == "right") nx++;
  else if(d == "left") nx--;
  else if(d == "up") ny--;
  else if(d == "down") ny++;

是否碰撞到邊際和身體，經過蛇頭作參考判斷

//判斷是否超出屏幕界限或者碰到本身的身體，是則遊戲結束
  if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array))
  {
   //重啓遊戲
   init();
   return;
  }

身體檢測函數

//碰撞檢測函數
 function check_collision(x, y, array)
 {
  //檢查當前座標是否已經存在於貪吃蛇數組中
  for(var i = 0; i < array.length; i++)
  {
   if(array[i].x == x && array[i].y == y)
    return true;
  }
  return false;
 }

檢測與食物的碰撞和繪製

//若是貪吃蛇碰到食物，則在頭部直接新增一個點
  if(nx == food.x && ny == food.y)
  {
   var tail = {x: nx, y: ny};
   score++;
   //生成新的食物
   create_food();
  }
                //若是貪吃蛇沒有碰到食物，則在頭部直接新增一個點，還須要去除尾部的一個點
  else
  //????????????????????????????????????????
  {
   var tail = snake_array.pop(); //去除尾部點
   tail.x = nx; tail.y = ny;
  }
  snake_array.unshift(tail); //移動數組
//22
  for(var i = 0; i < snake_array.length; i++)
  {
   var c = snake_array[i];
   //繪製單元格，每一個單元格爲10像素
   paint_cell(c.x, c.y);
  }
//33
  //繪製食物
  paint_cell(food.x, food.y);
  //繪製分數
  var score_text = "Score: " + score;
  ctx.fillText(score_text, 5, h-5);

運動起來

function init()
 {
  d = "right"; //默認方向
  create_snake();//建立蛇對象 函數
  create_food(); //建立食物對象 函數
  //分數清零
  score = 0;
  //讓貪吃蛇動起來！設置一個定時器以定時觸發重繪函數
  //設置定時時間爲60ms,即60fps
  //if(typeof game_loop != "undefined") clearInterval(game_loop);
  game_loop = setInterval(paint, 300);//動畫函數調用
 }

方向處理

//添加鍵盤控制
 $(document).keydown(function(e){
  var key = e.which;
  //注意不能直接逆向
  if(key == "37" && d != "right") d = "left";
  else if(key == "38" && d != "down") d = "up";
  else if(key == "39" && d != "left") d = "right";
  else if(key == "40" && d != "up") d = "down";
  
 })

總體代碼

<!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" />
<title>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
 //獲取canvas基本信息
 var canvas = $("#canvas")[0];
 var ctx = canvas.getContext("2d");
 var w = $("#canvas").width();
 var h = $("#canvas").height();
 //設置遊戲變量
 var cw = 10;//單元格像素寬度
 //其餘變量設置
 var d;//方向
 var food;//食物
 var score;//統計分數
 //建立貪吃蛇對象
 var snake_array; //由一個數組組成
 //主函數
 function init()
 {
  d = "right"; //默認方向
  create_snake();//建立蛇對象 函數
  create_food(); //建立食物對象 函數
  //分數清零
  score = 0;
  //讓貪吃蛇動起來！設置一個定時器以定時觸發重繪函數
  //設置定時時間爲60ms,即60fps
  //if(typeof game_loop != "undefined") clearInterval(game_loop);
  game_loop = setInterval(paint, 300);//動畫函數調用
 }
 init();//執行主函數
 //建立蛇對象 函數
 function create_snake()
 {
  var length = 5; //設置初始貪吃蛇長度
  snake_array = []; //清空數組
  for(var i = length-1; i>=0; i--)//讓蛇頭處在向右，第一行第四個格
  {
   //在左上方建立水平的貪吃蛇
   snake_array.push({x: i, y:0});//[{4,0}，{3,0}，{2,0}，{1,0}，{0,0}]
  }
 }
 //var arr=[{x:0,y:0},{x:1,y:1}]
 //建立食物函數
 function create_food()
 {
  food = {
   x: Math.round(Math.random()*(w-cw)/cw), 
   //450之內隨機數，保證在畫布內
   y: Math.round(Math.random()*(h-cw)/cw), 
  };
  //在屏幕內隨機產生座標點
 }
 //繪製函數
 function paint()
 {
  //在每一幀圖畫中都必須首先清除上一幀內容。
  //清屏，即以底色填充canvas
  ctx.fillStyle = "#faa";
  ctx.fillRect(0, 0, w, h);
  //貪吃蛇運動邏輯：將貪吃蛇的尾部點放到頭部
  //獲取貪吃蛇頭部的位置信息
  var nx = snake_array[0].x;
  var ny = snake_array[0].y;
  //根據貪吃蛇的運動方向計算最新頭部的座標信息
  if(d == "right") nx++;
  else if(d == "left") nx--;
  else if(d == "up") ny--;
  else if(d == "down") ny++;
  //判斷是否超出屏幕界限或者碰到本身的身體，是則遊戲結束
  if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array))
  {
   //重啓遊戲
   init();
   return;
  }
  //貪吃蛇吃食物邏輯
  //若是貪吃蛇碰到食物，則在頭部直接新增一個點
  if(nx == food.x && ny == food.y)
  {
   var tail = {x: nx, y: ny};
   score++;
   //生成新的食物
   create_food();
  }
                //若是貪吃蛇沒有碰到食物，則在頭部直接新增一個點，還須要去除尾部的一個點
  else
  //????????????????????????????????????????
  {
   var tail = snake_array.pop(); //去除尾部點
   tail.x = nx; tail.y = ny;
  }
  snake_array.unshift(tail); //移動數組
//22
  for(var i = 0; i < snake_array.length; i++)
  {
   var c = snake_array[i];
   //繪製單元格，每一個單元格爲10像素
   paint_cell(c.x, c.y);
  }
//33
  //繪製食物
  paint_cell(food.x, food.y);
  //繪製分數
  var score_text = "Score: " + score;
  ctx.fillText(score_text, 5, h-5);
 }
 //單元格繪製函數
 function paint_cell(x, y)
 {
  ctx.fillStyle = "blue";
  ctx.fillRect(x*cw, y*cw, cw, cw);
  ctx.strokeStyle = "white";
  ctx.strokeRect(x*cw, y*cw, cw, cw);
 }
        //碰撞檢測函數
 function check_collision(x, y, array)
 {
  //檢查當前座標是否已經存在於貪吃蛇數組中
  for(var i = 0; i < array.length; i++)
  {
   if(array[i].x == x && array[i].y == y)
    return true;
  }
  return false;
 }
 //添加鍵盤控制
 $(document).keydown(function(e){
  var key = e.which;
  //注意不能直接逆向
  if(key == "37" && d != "right") d = "left";
  else if(key == "38" && d != "down") d = "up";
  else if(key == "39" && d != "left") d = "right";
  else if(key == "40" && d != "up") d = "down";
  
 }) 
//end
});
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
</style>
</head>
<body>
<!-- canvas對象 -->
<canvas id="canvas" width="450" height="450"></canvas>
</body>
</html>

總結：

貪食蛇的難點

  1. 蛇的存儲（節數和座標，頭部信息存入數組頂部）

  2. 根據方向，移動後坐標的變化處理：咱們以蛇頭爲參考，經過方向去改變蛇頭座標，而後下面的蛇身子的座標依次等於上一個節點的座標，咱們能夠知道，運動時，蛇頭之後的部分，會移動到蛇身子上一節的位置，（最核心原理）

  3. 每次移動頭部都會進行插入的操做，插入變化後的座標，移除的與否與是否吃到食物有關

  4. 根據數組蛇信息，間隔的去清除繪製

13.video的html5視頻播放器

調用video的api，構造自定義外觀的播放器

測試時，須要一個mp4的視頻文件，那些播放，靜音須要圖片，你們想象去看

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title></title>
<style>
*{ margin:0; padding:0;}
body{ font-size:12px; font-family:"微軟雅黑"}
.html5demo{ width:300px; height:212px; position:relative; background:#000; margin:200px;}
.videotoolsback{ position:absolute; bottom:0px; left:0px; height:30px;width:300px; background:#0C9 repeat-x left top; opacity:0.9; z-index:5px;}
.videotools{ position:absolute; bottom:0px; left:0px; height:30px;width:300px;z-index:999px;}
.play{ float:left; height:14px; width:14px; margin:8px 8px; background:#F33 no-repeat left center; cursor:pointer;}
span.pause{background:#6C9 no-repeat left center;}
.current{ float:left; margin:8px 0; height:14px; line-height:14px; width:50px; text-align:right; color:#fff; font-size:12px;}
.time-s{float:left; margin:5px 0; width:8px; height:20px; background:#C93 no-repeat center top;}
.duration{float:left; margin:8px 0; height:14px; line-height:14px; width:50px;color:#fff; font-size:12px;}
.progressBar{position: relative;width:30px;height: 6px;background: #6495ed; float:left; margin:12px 0; border-radius:3px;}
.timeBar{position: absolute;top: -5px;left:0;height:16px; width:16px; background:url(default/handle.png) no-repeat left top;margin-left:-8px; cursor:pointer;}
.protimeBar{position: absolute; background:#a2cd5a;border-radius:3px; width:0;height: 6px; left:0px; top:0px;}
.muted{ float:right; height:14px; width:19px; margin:8px 8px; background:#CC3 no-repeat left top; cursor:pointer;}
span.truemuted{ background:#936 no-repeat left top;}
.volumeBar{float:right; position: relative;width:50px;height:6px;background: #6495ed;  margin:12px 8px;border-radius:3px;}
.volume{ position: absolute;top: -5px;left: 50%;height:16px; width:16px; background:#C9C no-repeat left top; margin-left:-8px;cursor:pointer;}
.fullscreen{ float:right; height:14px; width:14px; margin:8px 14px 8px 0px; background:#F99 no-repeat left top; cursor:pointer;}
span.unfullscreen{ background:#FC6 no-repeat left top;}
div.full-html5demo{ margin:0; position:fixed; left:0; top:0; z-index:2;}
div.full-videotoolsw{ width:100%;}
.context-toggle{ position:absolute; top:100px; left:0px; width:100%; text-align:center; height:50px; line-height:50px; color:#FFF; display:none; z-index:9999; font-size:16px;}
</style>
</head>
<body>
   <div class="html5demo">
        <video class="video" width="300" height="212" id="video" preload>      
  </video>  
        <!--<audio class="video" width="300" height="212" id="video" preload>
        <source src="" ></source>  
        </audio>-->
        <div class="videotoolsback"></div>     
     <div class="videotools">
         <span class="play" del="1" title="播放暫停"></span>
            <span class="current"></span>
            <span class="time-s"></span>
            <span class="duration"></span>
            <div class="progressBar" title="進程">
      <div class="protimeBar"></div>
               <div class="timeBar"></div>
            </div>
            <span class="fullscreen" del="1" title="全屏"></span>
            <div class="volumeBar" title="音量">
              <div class="volume"></div>
            </div>
            <span class="muted" del="1" title="靜音"></span> 
            <!--<div class="control">
                <span class="ff">快進</span>
                <span class="rw">倒帶</span>
                <span class="sl">快退</span>
            </div>--> 
     </div>
        <div class="context-toggle">按 ESC 退出全屏</div>
    </div> 
    
    <div style=" height:800px;"></div>                                  
</body>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script>
$(function(){ 
 videoPlay("movie.mp4");
 
 function videoPlay(url){
  var video=document.getElementById("video");
  video.src=url;
  var paly=$(".play");
  //code
  //video.autoplay=true; 
  //播放暫停
  paly.click(function(){
   if(paly.attr("del")==1){
    video.play();
    paly.addClass("pause");
    paly.attr("del",0);
   }else{   
    video.pause();
    paly.removeClass("pause");
    paly.attr("del",1);  
   }
  });
  //載入後顯示視頻文件總時間
  video.onloadedmetadata=function(){
    var temp_sub=video.duration.toString().substring(0,parseInt(video.duration.toString().indexOf("."))+3).replace(".", ":");
   // alert(getCurrentTime(1000*video.duration));
    $('.duration').text(getCurrentTime(1000*video.duration));
  };
  //視頻播放時，進度條顯示
  $('.current').text(getCurrentTime(1000*video.currentTime));
  video.ontimeupdate=function(){
   var temp_sub=video.currentTime.toString().substring(0,parseInt(video.currentTime.toString().indexOf("."))+3).replace(".", ":");   
   $('.current').text(getCurrentTime(1000*video.currentTime));
   var currentPos = video.currentTime;     
      var maxduration = video.duration;     
      var percentage = 100 * currentPos / maxduration; 
      $(".timeBar").css('left',percentage+'%');
   $(".protimeBar").css('width',percentage+'%');
     
  };
  //進度條點擊
  var timeDrag = false;  
  $('.progressBar').mousedown(function(e) {
     timeDrag = true;
     updatebar(e.pageX);
  });
  //頁面擡起
  $(document).mouseup(function(e) {
     if(timeDrag) {
     timeDrag = false;
     updatebar(e.pageX);    
     };
     if(volumeDrag) {
     volumeDrag = false;
     updatevolume(e.pageX);    
     };
  });
  //頁面移動
  $(document).mousemove(function(e) {
     if(timeDrag) {
     updatebar(e.pageX);    
     };
     if(volumeDrag) {
     updatevolume(e.pageX);    
     };
  });  
  //點擊進度條跳轉方法
  var updatebar = function(x) {
     var progress = $('.progressBar');
     var maxduration = video.duration;
     var position = x - progress.offset().left;
     var percentage = 100 * position / progress.width();  
     //點擊超出判斷
     if(percentage > 100) {
     percentage = 100;
     }
     if(percentage < 0) {
     percentage = 0;
     }
     //進度條跳轉到點擊位置
     $('.timeBar').css('left', percentage+'%'); 
           $(".protimeBar").css('width',percentage+'%');        
     video.currentTime = maxduration * percentage / 100;
  };
  
  //緩衝屬性，緩存數據的最後一個值.
  var startBuffer = function() {
     var maxduration = video.duration;
     var currentBuffer = video.buffered.end(0);
     var percentage = 100 * currentBuffer / maxduration;
     $('.bufferBar').css('width', percentage+'%');
   
     if(currentBuffer < maxduration) {
     setTimeout(startBuffer, 500);
     }
  };
  setTimeout(startBuffer, 500);
  //是否靜音
  $('.muted').click(function(){
   video.muted = !video.muted;
   if($(this).attr("del")==1){
      $(this).addClass("truemuted");
      $(this).attr("del",0);
   }else{
    $(this).removeClass("truemuted");
    $(this).attr("del",1);
   };
  });
  //聲音控制
  video.volume=0.5;
  var volumeDrag = false;
  $(".volumeBar").mousedown(function(e){ 
     volumeDrag = true;
     updatevolume(e.pageX);
  });  
  //點擊聲音跳轉方法
  var updatevolume = function(x) {
     var volumeBar= $('.volumeBar');
     var position = x - volumeBar.offset().left;
     var percentage = 100 * position / volumeBar.width();    
     //點擊超出判斷
     if(percentage > 100) {
     percentage = 100;
     }
     if(percentage < 0) {
     percentage = 0;
     }
     //進度條跳轉到點擊位置
     $('.volume').css('left', percentage+'%');
     video.volume = percentage / 100; 
  };   
  //快進/快退 倒帶控制
  //$('.ff').on('click', function() {
 //    video.playbackrate = 3;
 // });
 //  
 // $('.rw').on('click', function() {
 //    video.playbackrate = -3;
 // });
 //  
 // $('.sl').on('click', function() {
 //    video.playbackrate = 0.5;
 // });
  //全屏播放
  var winWidth=$(window).width();
  var winHeight=$(window).height();
  var prossw=winWidth-300;
  var vidWidth=$(".html5demo").width();
  var vidHeight=$(".html5demo").height();
  var vidprossw=$(".progressBar").width();
  $(window).resize(function(){
   winWidth=$(window).width();
   winHeight=$(window).height();
   prossw=winWidth-300;
   if($('.fullscreen').attr("del")==0){   
    $(".html5demo,.video").width(winWidth);
    $(".html5demo,.video").height(winHeight);
    $(".progressBar").width(prossw);    
   }else{    
   };
  });
  $('.fullscreen').click(function(){   
   if($(this).attr("del")==1){
    $(".html5demo").addClass("full-html5demo");
    $(".videotoolsback,.videotools").addClass("full-videotoolsw");
    $(this).addClass("unfullscreen");    
    $(".html5demo,.video").width(winWidth);
    $(".html5demo,.video").height(winHeight);
    $(this).attr("del",0);
    $(".progressBar").width(prossw);
    $(".context-toggle").show();
    setTimeout(function(){$(".context-toggle").hide()},2000);
    
   }else{//unfull    
    $(".html5demo").removeClass("full-html5demo");
    $(".videotoolsback,.videotools").removeClass("full-videotoolsw");
    $(this).removeClass("unfullscreen");    
    $(".html5demo,.video").width(vidWidth);
    $(".html5demo,.video").height(vidHeight);
    $(this).attr("del",1);
    $(".progressBar").width(vidprossw);
    $(".context-toggle").hide();
   };
      
   //fullScreenCancel(video);
  });
  //keyunfull 
   /** Coding Here */
  $(window).keydown(function(e){
   if (e.which === 27) {     
    if($('.fullscreen').attr("del")==0){
    $(".html5demo").removeClass("full-html5demo");
    $(".videotoolsback,.videotools").removeClass("full-videotoolsw");
    $('.fullscreen').removeClass("unfullscreen");    
    $(".html5demo,.video").width(vidWidth);
    $(".html5demo,.video").height(vidHeight);
    $('.fullscreen').attr("del",1);
    $(".progressBar").width(vidprossw);
    }
    $(".context-toggle").hide();
   }
  });
  //全屏播放方法
  //function fullScreenCancel(video){  
//    if(video.requestFullScreen) {  
//   video.requestFullScreen();  
//    } else if(video .webkitRequestFullScreen ) {  
//   video.webkitRequestFullScreen();  
//    } else if(video .mozRequestFullScreen) {  
//   video.mozRequestFullScreen();  
//    }  
//  };  
 };
 
 //從毫秒數獲得一個時間格式 
    function  getCurrentTime(ms) { 
  var  s = parseInt(ms / 1000); 
  var  m = parseInt(s / 60); 
  s -= m * 60; 
  var  h; 
  h = parseInt(m / 60); 
  m -= h * 60; 
  return  make2Str(m) + ":" + make2Str(s); 
 };
 //使數字時鐘保持兩位 
    function  make2Str(i) { 
  if (i < 10)  return  "0" + i; 
  else  return  "" + i; 
 }; 
});
</script>
</html>

14.可拖拽的登錄框

其實拖拽的實現，就是鼠標組合事件的處理

<!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" />
<title>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
 var drag=$("#drag"); 
 var isd=0; 
 var elex=0;
 var eley=0;
 drag.mousedown(function(event){ 
  isd=1;  
  elex=event.pageX-drag.position().left;
  eley=event.pageY-drag.position().top; 
   event.stopPropagation();    // do something
 });
 $(document).mousemove(function(event){ 
  if(isd==1){
   var evx=event.pageX;
   var evy=event.pageY;
   var cx=evx-elex;
   var cy=evy-eley;
   drag.css('left',cx);
   drag.css('top',cy);
    
  }else{}   
   event.stopPropagation();    // do something
 
 });
 $(document).mouseup(function(event){  
 if(isd==1){isd=0;}
  isd=0;
   event.stopPropagation();    // do something
 });
    
//end
});
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
</style>
</head>
<body>
<div id="drag" style="width:200px; height:200px; top:200px; left:400px; background:#990; position:absolute; padding:100px;">
 登陸<input type="text" /><br/>
    密碼<input type="text" /><br/>
    <input type="button" value="ok" />
</div>
</body>
</html>

很簡單的處理，不過有個問題，就是能夠超出屏幕，咱們須要作邊界處理，移動事件修改以下：

<!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" />
<title>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
 var drag=$("#drag"); 
 var isd=0; 
 var elex=0;
 var eley=0;
 drag.mousedown(function(event){ 
  isd=1;  
  elex=event.pageX-drag.position().left;
  eley=event.pageY-drag.position().top; 
   event.stopPropagation();    // do something
 });
 $(document).mousemove(function(event){ 
  if(isd==1){
   
    var evx=event.pageX;
    var evy=event.pageY;
    var cx=evx-elex;
    var cy=evy-eley;
    if(cx<=0){cx=0;}
    if(cx>$(window).width()-400){cx=$(window).width()-400;}
    if(cy<=0){cy=0;}
    drag.css('left',cx);
    drag.css('top',cy);
   
    
  }else{}   
   event.stopPropagation();    // do something
 
 });
 $(document).mouseup(function(event){  
 if(isd==1){isd=0;}
  isd=0;
   event.stopPropagation();    // do something
 });
    
//end
});
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
</style>
</head>
<body>
<div id="drag" style="width:200px; height:200px; top:200px; left:400px; background:#990; position:absolute; padding:100px;">
 登陸<input type="text" /><br/>
    密碼<input type="text" /><br/>
    <input type="button" value="ok" />
</div>
</body>
</html>

15.樹形菜單效果

<!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" />
<title>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
$(".boxt li").has("ul").addClass("see")
 $(".boxt .con1").hide();
 $(".boxt .con2").hide();
 $(".boxt .con3").hide();
 $(".boxt .d1").first().find("ul").show();
 $(".boxt .d1").first().removeClass("see");
 $(".boxt .d1").first().find("li").removeClass("see");
 //ge2
 $(".boxt .d1").has("ul").click(function(){  
  $(this).children("ul").toggle()
  $(this).toggleClass("see")
   
  })
 $(".boxt .d2").has("ul").click(function(event){
  $(this).children("ul").toggle()
  $(this).toggleClass("see") 
  event.stopPropagation()   
  
  })
  $(".boxt .d3").has("ul").click(function(event){
  $(this).children("ul").toggle()
  $(this).toggleClass("see") 
  event.stopPropagation()   
  
  })
  //ge3 mao
  $(".boxt .d2").click(function(event){   
   event.stopPropagation() 
   })
  $(".boxt .d3").click(function(event){   
   event.stopPropagation() 
   })
   
   $(".boxt .d4").click(function(event){   
   event.stopPropagation() 
   })
//end
});
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
.boxt{width:300px; background:#0CF; margin-top:30px;}
.boxt li{ padding-left:30px; background:#C00; margin:2px 0;}
.boxt div{ height:20px; background:#CF3; line-height:20px;}
.boxt li.see{ background:#03F;}
</style>
</head>
<body>
<ul class="wrapper boxt">
 <li class="d1">
     <div class="d11">我是一級1</div>
        <ul class="con1">
                    <li class="d2">
                        <div class="d22">我是二級1</div>
                        <ul class="con2">
                                    <li class="d3">
                                        <div class="d33">我是三級1</div>
                                        <ul class="con3">
                                         <li class="d4">
                                             <div class="d44">我是四級1</div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="d3">
                                        <div class="d33">我是三級2</div>
                                         <ul class="con3">
                                         <li class="d4">
                                             <div class="d44">我是四級1</div>
                                            </li>
                                            <li class="d4">
                                             <div class="d44">我是四級2</div>
                                            </li>
                                        </ul>
                                    </li>                                                      
                                </ul>  
                    </li>
                    <li class="d2">
                        <div class="d22">我是二級2</div>
                        <ul class="con2">
                                    <li class="d3">
                                        <div class="d33">我是三級1</div>
                                    </li>
                                    <li class="d3">
                                        <div class="d33">我是三級2</div>
                                    </li>                                                      
                                </ul>
                    </li>
                    <li class="d2">
                        <div class="d22">我是二級3</div>
                    </li>                   
           </ul>
    </li>
    <li class="d1">
     <div class="d11">我是一級2</div>
        <ul class="con1">
                    <li class="d2">
                        <div class="d22">我是二級1</div>
                    </li>
                    <li class="d2">
                        <div>我是二級2</div>
                    </li>
                    <li class="d2">
                        <div class="d22">我是二級3</div>
                    </li>                   
         </ul>
    </li>
    <li class="d1">
     <div class="d11">我是一級3</div>
    </li>
</ul>
</body>
</html>

 16.全選/反全選處理

簡單實現

<!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" />
<title>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
var all=$("#all");
     var boxlists=$("#box").find("input:checkbox");
     all.change(function(){
        //alert(all.checked)
        if(all.is(":checked")){
           boxlists.prop('checked',true);
        }else{
           boxlists.prop('checked',false);
        };
         
     });
//end
});
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/

</style>
</head>
<body>
<br>
    <div style=" height:50px;"><input type="checkbox" id="all">   全選</div>
    
    <div style="width:200px; border:1px solid #000;" id="box">
    <input type="checkbox">  1<br><br>
    <input type="checkbox">  2<br><br>
    <input type="checkbox">  3<br><br>
    <input type="checkbox">  4<br><br>
    <input type="checkbox">  5<br><br>
    <input type="checkbox">  6<br><br>
    <input type="checkbox">  7<br><br>
    </div>
</body>
</html>

 咱們實現另外一種全選思路。也是樹形菜單帶有複選框用到的思路

全選後，上面的例子，在去取消被選中的子複選框，發現，全選仍是處在選中中，如今，咱們的子複選框有一個取消選中，父複選框就取消選中，代碼：

<!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" />
<title>jq插件簡單開發</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
var all=$("#all");
     var boxlists=$("#box").find("input:checkbox");
     all.change(function(){
        //alert(all.checked)
        if(all.is(":checked")){
           boxlists.prop('checked',true);
        }else{
           boxlists.prop('checked',false);
        };
         
     });
  boxlists.change(function(){
   var len=$("#box").find("input:checkbox").length;
   var newlen=$("#box").find("input:checkbox:checked").length;
   if(newlen!=len){
     all.prop('checked',false);
  }else{
    all.prop('checked',true);
  }
 });
//end
});
</script>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/

</style>
</head>
<body>
<br>
    <div style=" height:50px;"><input type="checkbox" id="all">   全選</div>
    
    <div style="width:200px; border:1px solid #000;" id="box">
    <input type="checkbox">  1<br><br>
    <input type="checkbox">  2<br><br>
    <input type="checkbox">  3<br><br>
    <input type="checkbox">  4<br><br>
    <input type="checkbox">  5<br><br>
    <input type="checkbox">  6<br><br>
    <input type="checkbox">  7<br><br>
    </div>
</body>
</html>

原理：點擊子複選框選擇出當前選中的總長度與子複選框個數作長度比較

17.瀑布流效果（未實現）

我說出原理，而後你們本身去寫就行了，這個的難度若是把上面的學會了，也是分分鐘的了

  1. 等寬不等高

  2. 定位去排列

  3. 咱們先拍第一行，加入咱們作5列的效果，top都是0，left是width（等寬）*index（第1 2 3 4 5個）就是距離左側的值

  4. 咱們建立一個數組，長度是5，等於一行的數量，把第一行的每一個高度對應存入，高度1-5是不一樣的

  5. 在數組的五個高度數值中，找出對小的，而且取出他在數組的位置

  6. 第2行開始插入，求除了最小高度位置，把第6個元素等位在下面，而且加上新高度，不斷求出最小高度值的數組位置，根據位置，去設置top值（高度），和left值（位置）

  7. 一次顯示5行，咱們滾動加載，滾動事件判斷，到達底部，繼續加載6-10行

jq的就這些原理，我下面寫個css3的，真是一行樣式就實現了

.box{ width:1000px; margin:50px auto; border:1px solid #000;-moz-columns:300px;
 -webkit-columns:300px;
 columns:300px;}
</style>

根據總寬度1000px，經過多欄的300px去分配

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程