Velocity.js的使用

来源:http://www.cnblogs.com/xiaohuochai/archive/2017/08/21/7404928.html
-Advertisement-
Play Games

[1]概述 [2]基本用法 [3]參數設置 [4]配置項 [5]動畫指令 [6]特色動畫 [7]高級用法 [8]UI插件 ...


前面的話

　　Velocity是一款優秀的JS動畫庫，完全可以作為jQuery的animate的替代品。需要動畫功能時，使用Velocity是一個好選擇。本文將詳細介紹Velocity.js的使用

 

概述

　　Velocity是一個簡單易用、高性能、功能豐富的輕量級JS動畫庫。它和jQuery的animate()有相同的API， 但它不依賴 jQuery，可單獨使用。Velocity不僅包含了$.animate()的全部功能，還擁有：顏色動畫、轉換動畫(transforms)、迴圈、緩動、SVG動畫和滾動動畫等特色功能。它比$.animate()更快更流暢，性能甚至高於CSS3 animation，是jQuery和CSS3 transition的最佳組合，它支持所有現代瀏覽器，最低可相容到IE8和Android 2.3

【下載】

　　可以通過官網直接下載Velocity.js，下載地址

　　也可以使用npm安裝

npm install velocity-animate

 

基本用法

　　當使用jQuery時，Velocity和jQuery的animate()用法類似

$("#test").velocity({
    left: "200px"
}, {
    duration: 450,
    delay: 300
});

　　不使用jQuery時，寫法如下

  var oBox = document.getElementById('test');
  Velocity(oBox,{
      left: "200px"
  }, {
      duration: 450,
      delay: 300
  });

　　下麵是一個實例

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
reset.onclick = function(){history.go();}
btn.onclick = function(){
  var oBox = document.getElementById('test');
  Velocity(oBox,{
      left: "200px"
  }, {
      duration: 450,
      delay: 300
  }); 
}
</script>

 

參數設置

　　Velocity 接收一組 css 屬性鍵值對 (css map) 作為它的第一個參數，該參數作為動畫效果的最終屬性。第二個參數是可選參數 為動畫的額外配置項。下麵為參數的寫法：

$element.velocity({
    width: "500px",        // 動畫屬性 寬度到 "500px" 的動畫
    property2: value2      // 屬性示例
}, {
    /* Velocity 動畫配置項的預設值 */
    duration: 400,         // 動畫執行時間
    easing: "swing",       // 緩動效果
    queue: "",             // 隊列
    begin: undefined,      // 動畫開始時的回調函數
    progress: undefined,   // 動畫執行中的回調函數（該函數會隨著動畫執行被不斷觸發）
    complete: undefined,   // 動畫結束時的回調函數
    display: undefined,    // 動畫結束時設置元素的 css display 屬性
    visibility: undefined, // 動畫結束時設置元素的 css visibility 屬性
    loop: false,           // 迴圈
    delay: false,          // 延遲
    mobileHA: true         // 移動端硬體加速（預設開啟）
});

【單一對象參數寫法】

　　Velocity 也支持 single-argument 的語法

$element.velocity({
    properties: { opacity: 1 },
    options: { duration: 500 }
});

// 或者：
$element.velocity({
    p: { opacity: 1 }, // 可以將 properties 簡寫成 p
    o: { duration: 500 }
});

【逗號分割的參數寫法】

$element.velocity({ top: 50 }, 1000);
$element.velocity({ top: 50 }, 1000, "swing");
$element.velocity({ top: 50 }, "swing");
$element.velocity({ top: 50 }, 1000, function() { alert("Hi"); });

【單位】

　　如果不寫屬性值的單位, Velocity 會將像素(px)作為預設單位

// 等同 padding: 1px
$element.velocity({ padding: 1 });

// 等同 padding-left: 1px, padding-right: 1px
$element.velocity({
    paddingLeft: 1,
    paddingRight: 1
});

// 不能這樣寫！因為這樣相當於為 padding 賦了多個值
$element.velocity({ padding: "1 1 1 1" }); // error

　　Velocity 在 1.2.0+ 版本里增加了對 "px, em, rem, %, deg, vw/vh" 這些單位的支持。如果不填寫屬性單位，預設單位還是"px"，但 "deg" 用於 rotateZ 屬性時可以省略不寫

【計算屬性】

　　Velocity 還支持動態計算屬性值，包括 "+, -, *, /"，還可以設置元素在動畫執行前的初始值

　　[註意]"rem" 只支持 IE9+，"vh/vw" 只支持 IE9+ 和 Android 4.4+ 

$element.velocity({
    top: 50,                // 等同於 "50px"
    left: "50%",
    width: "+=5rem",        // 每次在當前值上疊加 5rem
    height: "*=2"           // 每次在當前值上疊乘 2
    color: ["#888", "#000"] // 每次動畫執行前，color 的初始值都為"#000"（從"#000"過渡成"#888"）
});

【鏈式動畫】

　　當一個元素連續應用多個velocity()時，動畫將以隊列的方式執行

$element
    /* 先執行寬度變為75px的動畫 */
    .velocity({ width: 75 })
    /* 等前面的寬度動畫結束後，再執行高度變為0的動畫 */
    .velocity({ height: 0 });

　　下麵是一個例子

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:150px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
reset.onclick = function(){history.go();}
btn.onclick = function(){
  $('#test').velocity({left:200}, {duration:500,complete:function(el){
    el[0].style.backgroundColor = 'lightblue';
    el[0].innerHTML = '小火柴的藍色理想';
  }}).velocity({width:300})
}
</script>

 

配置項

　　Velocity 提供了豐富的可選配置項，可以更好的控制動畫，也可以利用這些配置做出炫酷複雜的動畫特效

【執行時間】

　　Velocity 的動畫執行時間以毫秒為單位，並支持 jQuery 中的動畫速度關鍵字: "slow","normal","fast"

$element.velocity({ opacity: 1 }, { duration: 1000 });

// 支持 jQuery 中的動畫速度關鍵字：
$element.velocity({ opacity: 1 }, { duration: "slow" });

【easing緩動效果】

　　Velocity預設包含5種緩動效果

　　1、jQuery UI的緩動關鍵字

"linear"
"swing"
"spring"
"easeInSine"
"easeOutSine"
"easeInOutSine"
"easeInQuad"
"easeOutQuad"
"easeInOutQuad"
"easeInCubic"
"easeOutCubic"
"easeInOutCubic"
"easeInQuart"
"easeOutQuart"
"easeInOutQuart"
"easeInQuint"
"easeOutQuint"
"easeInOutQuint"
"easeInExpo"
"easeOutExpo"
"easeInOutExpo"
"easeInCirc"
"easeOutCirc"
"easeInOutCirc"

　　2、CSS3緩動關鍵字

"ease"
"ease-in"
"ease-out"
"ease-in-out"

　　3、CSS3 貝塞爾曲線

[ 0.17, 0.67, 0.83, 0.67 ]

　　4、彈簧物理緩動（spring physics）

 　　以2位數組的形式 [ tension, friction ]，tension最大值為500，friction 最大值為20

　　5、步驟緩動（step easings）

　　以1位數組的形式 使動畫通過指定的步驟過渡到結束值

/* 標準寫法 */
$element.velocity({ width: 50 }, { easing: "easeInSine" });

/* 或 */
$element.velocity({ width: 50 }, "easeInSine");
/* jQuery UI easings */
$element.velocity({ width: 50 }, "easeInSine");

/* CSS3 easings */
$element.velocity({ width: 50 }, "ease-in");

/* 貝塞爾曲線 */
$element.velocity({ width: 50 }, [ 0.17, 0.67, 0.83, 0.67 ]);

/* 彈簧物理 */
$element.velocity({ width: 50 }, [ 250, 15 ]);

/* step easing */
$element.velocity({ width: 50 }, [ 8 ]);

　　緩動可應用於單個屬性

$element.velocity({
    borderBottomWidth: [ "2px", "spring" ], // border-bottom 使用 "spring"
    width: [ "100px", [ 250, 15 ] ],        // width 使用 spring physics
    height: "100px"
}, {
    easing: "easeInSine" // 預設所有屬性使用 "easeInSine"
});

　　可以通過函數的形式註冊自定義的緩動效果，函數將被擴展到$.Velocity.Easings對象上

// p：動畫完成的百分比（十進位值）
// opts：傳遞到觸發 .velocity() 調用的選項
// tweenDelta：補間
$.Velocity.Easings.myCustomEasing = function (p, opts, tweenDelta) {
    return 0.5 - Math.cos( p * Math.PI ) / 2;
};

 【動畫隊列】

　　可以通過設置queue: false 強制並行執行一個新動畫

// 執行寬度變為"50px"的動畫
$element.velocity({ width: "120px" }, { duration: 3000 });

setTimeout(function() {
    /* 1.5秒後 開始並行執行高度變為"50px"的新動畫 */
    $element.velocity({ height: "120px" }, { duration: 1500, queue: false });
}, 1500);

　　下麵是一個例子

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  // 執行寬度變為"50px"的動畫
  $("#test").velocity({ width: "200px" }, { duration: 3000 });  
  setTimeout(function() {
    /* 1.5秒後 開始並行執行高度變為"50px"的新動畫 */
    $("#test").velocity({ height: "200px" }, { duration: 1500, queue: false });
  }, 1500);  
})
</script>

　　也可以自定義動畫隊列，但不會立即執行，需要通過dequeue()方法手動執行動畫

// 自定義隊列，這裡並不會立即執行
$("div")
  .velocity({ translateX: 75 }, { queue: "a" })
  .velocity({ width: 50 }, { queue: "b" })
  .velocity({ translateY: 75 }, { queue: "a" })
  .velocity({ height: 0 }, { queue: "b" })

// 2秒後 執行隊列"a"的動畫
setTimeout(function() {
  $("div").dequeue("a");
}, 2000);

// 4秒後 執行隊列"b"的動畫
setTimeout(function() {
  $("div").dequeue("b");
}, 4000);

　　[註意]loop迴圈選項 和reverse反向動畫指令，不能和隊列一起使用

【回調函數】

begin()

　　begin為動畫開始前的回調函數，但在迴圈模式下(設置loop選項時)，該函數只會在第一次迴圈前執行一次

$element.velocity({
    opacity: 0
}, {
    begin: function(elements) { console.log(elements); }
});

complete()

　　complete為動畫結束時的回調函數，在無限迴圈模式下（設置loop: true） 該回調函數將不會執行，但是有規定次數的迴圈模式下（比如設置loop: 3） 該回調函數將只會在最後一次迴圈結束後執行一次

$element.velocity({
    opacity: 0
}, {
    complete: function(elements) { console.log(elements); }
});
$element.velocity({
    opacity: 0
}, {
    // 動畫迴圈執行3次
    loop: 3,
    // 回調函數將在第3次迴圈結束後 執行一次
    complete: function(elements) {
        alert("I am hungry！");
    }
});

progress()

　　progress為動畫執行過程中調用的函數， 有elements、complete、remaining、start、tweenValue5個參數

elements：當前執行動畫的元素，可以用$(elements)來獲取
complete：整個動畫過程執行到百分之多少，該值是遞增的，註意：該值為一個十進位數值並不帶單位(%)
remaining：整個動畫過程還剩下多少毫秒，該值是遞減的
start：動畫開始時的絕對時間 (Unix time)
tweenValue：動畫執行過程中 兩個動畫屬性之間的補間值
$element.velocity({
    opacity: 0,
    tween: 1000 // 可選的
}, {
    duration: 2000,
    progress: function(elements, complete, remaining, start, tweenValue) {
        console.log((complete * 100) + "%");
        console.log(remaining + "ms remaining!");
        console.log("The current tween value is " + tweenValue)
    }
});

// 可以簡寫這些參數：
$element.velocity({
    tween: [ 0, 1000 ]
}, {
    easing: "spring",
    progress: function(elements, c, r, s, t) {
        console.log("The current tween value is " + t)
    }
});

【移動端加速】

　　mobileHA可以設置是否開始移動端硬體加速， 預設值為true，也可以通過設置 mobileHA: false關閉硬體加速

// 關閉移動端硬體加速
$element.velocity(propertiesMap, { mobileHA: false });

【Loop動畫迴圈執行】

　　設置loop為一個正整數，比如設置loop: 2，就可以讓動畫迴圈執行2次

// 迴圈執行2次（註意：元素height值變化到10em 再從10em變化到初始值 是一次迴圈）
$element.velocity({ height: "10em" }, { loop: 2 });

　　如果設置loop: true，可以讓動畫無限迴圈執行

$element.velocity({ height: "10em" }, { loop: true });

【Delay動畫延遲執行】

　　和 jQuery 的$.delay()方法一樣，動畫將會延遲所設定的毫秒後執行

// 動畫將延遲1500毫秒後執行
$element.velocity({ height: "+=10em" }, { delay: 1500 });

【display 和 visibility】

　　可以在動畫執行結束後 動態設置元素的 css 屬性display或visibility

/* 動畫結束後 元素 display 屬性設為 "none" */
$element.velocity({ opacity: 0 }, { display: "none" });

/* 動畫結束後 元素的 visibility 屬性設為 hidden */
$element.velocity({ opacity: 0 }, { visibility: "hidden" });

　　display 或 visibility 的值可以設為 css 中規定的其他值，比如 display: "inline-block"

　　[註意]當使用reverse方向動畫指令時，display 和 visibility 選項都將被忽略。

 

動畫指令

　　Velocity 中預定義了幾個常用的快捷動畫指令

【fade】

　　Fade對應為"fadeIn"(淡入) 和"fadeOut"(淡出) 兩個動畫指令， 和 jQuery 的$.fadeIn()和$.fadeOut()相似

　　Fade 和 Slide 動畫指令都會動態設置元素的display屬性顯示或隱藏。 預設情況下，當元素被顯示，如果是塊級元素(如<div>)，就會被設置成display: block，如果是行級元素(如<span>)，就會被設為display: inline。Velocity會根據元素的標簽類型設置最適合的值

　　如果在配置項中設置了display選項為某值時， 動畫結束時該值會覆蓋 Fade 和 Slide 所設置的display屬性值

// 元素會執行平滑淡入的效果
// 當動畫結束時 元素的 display 屬性會被設置成 "table"
$element.velocity("fadeIn", { display: "table" });

　　下麵是一個例子

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
var OnOff = true;
$("#btn").click(function(){
  if(OnOff = !OnOff){
    $("#test").velocity("fadeIn"); 
  }else{
    $("#test").velocity("fadeOut"); 
  } 
})
</script>

【slide】 

　　Slide 對應為:"slideUp"(收起) 和"slideDown"(展開)兩個動畫指令， 和 jQuery 的$.slideUp(),$.slideDown()方法相似，通過動態調整元素的height屬性，讓元素 "收起" 或 "下拉"

// 元素會先"收起"隱藏，延遲500毫秒後 再"下拉"顯示
$element
    .velocity("slideUp", { duration: 1500 })
    .velocity("slideDown", { delay: 500, duration: 1500 });

　　下麵是一個例子

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
var OnOff = false;
$("#btn").click(function(){
  if(OnOff = !OnOff){
    $("#test").velocity("slideUp"); 
  }else{
    $("#test").velocity("slideDown"); 
  } 
})
</script>

【scroll】 

　　1、滾動瀏覽器內容到目標元素的位置

　　"scroll"動畫指令，比如常用的回頂動畫就可以使用這個指令

/* 回頂動畫，滾動瀏覽器內容到 <body> 的頂部 */
$("body").velocity("scroll", { duration: 500, easing: "easeOutQuart" });

　　下麵是一個例子

<body style="height:2000px">
<button id="btn" style="position:fixed;right:0;bottom:0">回到頂部</button>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#btn").click(function(){
  $(document.documentElement).velocity("scroll", { duration: 500, easing: "easeOutQuart" });
})
</script> 
</body>

　　2、滾動元素內容到目標位置

　　當一個元素的內容部分溢出產生滾動條，可以使用"scroll"將內容滾動到指定的位置，container選項對應為該元素的選擇器

/* 讓 $("#container") 元素的內容滾動到內部子元素 $("#element3") 所在的位置. */
$("#element3").velocity("scroll", { container: $("#container") });
<div id="box" style="height:100px;width:200px;overflow:auto">
  <p id="element1">1 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  <p id="element2">2 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
  <p id="element3">3 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  <p id="element4">4 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  <p id="element5">5 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  <p id="element6">6 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p> 
</div>
<button id="btn">到第四段</button>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#btn").click(function(){
  $("#element4").velocity("scroll", { container: $("#box"), easing: "easeOutQuart" });
})
</script>

　　3、 設置滾動相對偏移量

　　可以設置相對偏移量，單位預設為px

$element
    /* 滾動到相對 $element 向下偏移250px的地方 */
    .velocity("scroll", { duration: 750, offset: 250 })
    /* 再滾動到相對 $element 向上偏移50px的地方 */
    .velocity("scroll", { duration: 750, offset: -50 });

　　另外，當滾動整個瀏覽器視窗時，如果目標元素為<html>， 可以關閉硬體加速，設置mobileHA: false來避免 iOS 中可能出現的頁面閃動問題

/* 滾動整個頁面到一個任意值 */
$("html").velocity("scroll", { offset: "750px", mobileHA: false });

【stop】

　　"stop"指令，可以使當前正在執行的動畫立即停止，類似 jQuery 的$.stop()方法

$element.velocity("stop"); // 停止正在執行的 $element 元素的動畫
$element.velocity("stop", "myQueue"); // 停止某自定義隊列
$element.velocity({ left: 100 });
// 點擊 $("#button")，立即停止當前正在執行的 left 動畫
// 並立即反向執行 left 動畫 (right 方向運動)
$("#button").on("click", function() {
    $element.velocity("stop").velocity("reverse");
});

　　設置stop: true, 可以停止並清空當前正在執行的整個動畫隊列

$element
    .velocity({ width: 100 }, 1000)
    .velocity({ height: 200 }, 1000);

// 如果元素正在執行 width 動畫，點擊 $("#button") 將立即停止當前動畫
// 並移除和跳過將要執行的 height 動畫隊列
$("#button").on("click", function() {
    $element.velocity("stop", true);
});

【finish】

　　"finish"指令會停止當前正在執行的動畫，並直接跳轉到動畫結束的狀態（無過渡）

【reverse】

　　"reverse"指令使動畫反向執行，就像讓一部電影倒著播放。 Reverse 預設會繼承之前動畫的配置選項（比如duration,easing等）， 但也可以重新設置

$element
    .velocity({ left: 200 }, { duration: 500 })
    .velocity("reverse", { duration: 2000 });

　　下麵是一個例子

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $("#test").velocity({left:200}).velocity("reverse"); 

})
</script>

 

特色動畫

　　Velocity 提供了一些特色動畫功能

【transform】

　　Velocity 支持2D/3D變換動畫， 比如translate, scale, rotate, skew等

$element.velocity({
    translateX: "200px",
    rotateZ: "45deg"
});

　　以下列舉了所有常用的 transform 相關可用屬性：

{
    /* translate */
    translateX: 20,     // 等同於"20px"
    translateY: "1.5em",
    translateZ: "20px", // IE10+

    /* scale */
    scale: 0.5,
    scaleX: 0.5,
    scaleY: 0.5,

    /* rotate */
    rotate: 45,       // 等同於"45deg"
    rotateX: "45deg", // IE10+
    rotateY: "45deg", // IE10+
    rotateZ: "45deg",

    /* skew */
    skewX: "30deg",
    skewY: "30deg",
}

　　[註意]瀏覽器支持：> IE9

<button id="btn">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $("#test").velocity({rotateZ: "45deg"}).velocity("
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 面向對象編程思想-迭代器模式
    一、引言 上篇博客中學習了命令模式，是將行為抽象為命令，使得行為請求者和接收者形成低耦合關係。我們知道行為型設計模式關註的是對象職責的分離，今天我們將學習一個新的設計模式，迭代器模式： 二、迭代器模式 定義：提供一種方法順序訪問一個聚合對象中各個元素，而又不暴露該對象的內部顯示 下麵是迭代器模式結構 ...
  • 兩天學會css基礎（二）
    接上一篇博客，還有css中的兩個重要知識點沒有說到，就是元素的浮動與定位。 第三部分：元素的浮動與清除 這部分的內容之前的博客已總結過。請查看css中的浮動與三種清除浮動的方法這篇文章。 浮動在網頁中也用的和普遍，特別要註意清除浮動的方法。 第四部分：元素的定位 元素的定位在實際開發中會經常用到，特 ...
  • 200行的Node爬蟲花了半天的時間把網易雲上的30萬首歌曲信息都抓取回來了
    早兩天在網易雲聽歌看評論的時候，突然想把網易雲上所有歌曲都抓取下來然後按照評論數進行一次排名，把評論數超過10萬的歌曲都聽一次，於是便有了這個項目。 因為只是一個小前端，所以使用了Node來寫這個爬蟲。 實現的思路比較簡單，把網易雲上的所有知名歌手先抓取下來，一共是3萬左右。然後每個歌曲選取10首評 ...
  • js獲取css的各種樣式並且設置他們
    js原生獲取css樣式,並且設置,看似簡單,其實並不簡單,我們平時用的ele.style.樣式,只能獲取內嵌的樣式,但是我們寫的樣式基本都在style屬性裡面; 這裡我們就需要: 下麵這個代碼主要是設置為了相容IE這孫子; function getStyle(element, attr) { if ...
  • JavaScript入門幾個概念
    JavaScript入門幾個概念 ======================== 剛剛入門JavaScript的時候，搞懂DOM、BOM以及它們的對象document和window很有必要。 DOM是為了操作文檔出現的API，document是它的一個對象。 BOM是為了操作瀏覽器出現的API，w ...
  • node.js之調試器
    node.js之調試器 1.在命令行視窗中，可以使用"node debug" 命令來啟用調試器，代碼如下： node debug 接下來根據一個實例進行學習調試過程： 編寫app.js文件進行調試： console.log('hello,word') function foo(){ console. ...
  • JavaScript學習——使用JS完成省市二級聯動
    1、我們希望在註冊頁面中添加一個欄位(籍貫)，當用戶選擇一個具體的省份，在後面的下拉列表中動態載入該省份下所有的城市。顯示的效果如下： 2、步驟分析： 第一步：確定事件(onchange)併為其綁定一個函數 第二步：創建一個二維數組用於存儲省份和城市 第三步：獲取用戶選擇的省份 第四步：遍歷二維數組 ...
  • 邁向全棧開發學習(1)
    寫在前面： 本人從事軟體開發方面三年了，一直是從事著.net開發，但是我個人熱衷於前端開發，由於開發經驗不足即使效勞過三家公司了也沒有真正去從事著前端開發這個職位，雖然如此但是我還是專註著前端開發的（哪怕現在還是半桶水）。為了繼續好好的學習前端開發就藉此博客記錄下學習的心路歷程，把一直以來所學的捋一 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類