整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
lt;marquee></marquee>文字滑動
<marquee behavior="slide"></marquee>滑動
<marquee behavior="scroll"></marquee>預設卷動
<marquee behavior="alternate"></marquee>來回卷動
<marquee direction="down"></marquee>向下卷動
<marquee direction="up"</marquee>向上卷動
<marquee direction="right"></marquee>向右卷動
<marquee direction="left"></marquee>向左卷動
<marquee loop="2"></marquee>循環次數, 默認值為：-1, 表示一直滾動下去。
<marquee width="180"></marquee>設定寬度
<marquee height="30"></marquee>設定高度
<marquee bgcolor="#FF0000"></marquee>設定背景顏色
<marquee scrollamount="30"></marquee>設定卷動距離(px)
<marquee scrolldelay="300"></marquee>設定卷動時間(毫秒)
<marquee hspace="100"></marquee> hspace 水平頁邊距
<marquee vspace="80"></marquee> vspace 垂直頁邊距
<marquee direction="left" behavior="scroll" width="300" height="400" bgcolor="#ff0" scrollAmount="50" scrollDelay="1000">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>JQ</li>
<li>BOOTSTRAP</li>
</ul>
</marquee>以上整數涉及的單位是像素px
<marquee>
<img src="images/03.jpg" />
<img src="images/04.jpg" />
<img src="images/05.jpg" />
<img src="images/06.jpg" />
<img src="images/07.jpg" />
<img src="images/08.jpg" />
<img src="images/09.jpg" />
</marquee>marquee常用到的兩個事件：
onmouseout="this.start()" 當鼠標移出該區域時
onbmouseover="this.stop()" 當鼠標移入該區域時
家好，我是皮皮。
我們會看到很多網頁的粒子特效；如上圖所示，這些都是借助HTML新特性，使用新增標簽Canvas得到的效果；那么我們來了解下canvas。
在 MDN 中是這樣定義 <canvas> 的：
<canvas> 是 HTML5 新增的元素，可用于通過使用 JavaScript 中的腳本來繪制圖形。例如，它可以用于繪制圖形、制作照片、創建動畫，甚至可以進行實時視頻處理或渲染。
這里需要劃重點的是，<canvas> 只是一個畫布，本身并不具有繪圖的能力，繪圖必須使用 JavaScript 等腳本語言。
<canvas> 標簽允許腳本語言動態渲染位圖像。<canvas> 標簽創建出了一個可繪制區域，JavaScript 代碼可以通過一套完整的繪圖功能類似于其他通用二維的 API 訪問該區域，從而生成動態的圖形。
我們可以認為 <canvas> 標簽只是一個矩形的畫布。JavaScript 就是畫筆，負責在畫布上畫畫。
在互聯網出現的早期，Web 只不過是靜態文本和鏈接的集合。1993 年，有人提出了 img 標簽，它可以用來嵌入圖像。
由于互聯網的發展越來越迅猛，Web 應用已經從 Web 文檔發展到 Web 應用程序。但是圖像一直是靜態的，人們越來越希望在其網站和應用程序中使用動態媒體（如音頻、視頻和交互式動畫等），于是 Flash 就出現了。
但是隨著 Web 應用的發展，出現了 HTML5，在 HTML5 中，瀏覽器中的媒體元素大受青睞。包括出現新的 Audio 和 Video 標簽，可以直接將音頻和視頻資源放在 Web 上，而不需要其他第三方。
其次就是為了解決只能在 Web 頁面中顯示靜態圖片的問題，出現了 Canvas 標簽。它是一個繪圖表面，包含一組豐富的 JavaScript API，這些 API 使你能夠動態創建和操作圖像及動畫。img 對靜態圖形內容起到了哪些作用，Canvas 就可能對可編寫腳本的動態內容起到哪些作用。
了解了canvas之后，我們使用新標簽搭配原生JS，實現一個簡單的頁面特效 ------ 鼠標滑動效果，如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
頁面非常簡單，只需要一個簡單的canvas標簽即可；
樣式設置
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
#myCanvas {
background-color: #000; /* 黑色 */
}
初始化設置
var myCanvas = document.getElementById('myCanvas');
var ctx = myCanvas.getContext("2d");
var starlist = [];
function init() {
// 設置canvas區域的范圍為整個頁面
myCanvas.width = window.innerWidth;
myCanvas.height = window.innerHeight;
};
init();
監聽
window.onresize = init; // 監聽屏幕大小改變 重新為canvas大小賦值
移動事件
// 當鼠標移動時 將鼠標坐標傳入構造函數 同時創建一個對象
myCanvas.addEventListener('mousemove', function (e) {
// 將對象push到數組中，畫出來的彩色小點可以看作每一個對象中記錄著信息 然后存在數組中
starlist.push(new Star(e.offsetX, e.offsetY));
});
隨機函數
// 隨機函數封裝,設置坐標
function random(min, max) {
// 設置生成隨機數公式
return Math.floor((max - min) * Math.random() + min);
};
對象構造
// 定義了一個構造函數進行對象構造
function Star(x, y) {
// 將坐標存在每一個點的對象中
this.x = x;
this.y = y;
// 設置隨機偏移量
this.vx = (Math.random() - 0.5) * 3;
this.vy = (Math.random() - 0.5) * 3;
this.color = 'rgb(' + random(0, 256) + ',' + random(0, 256) + ',' + random(0, 256) + ')';
this.a = 1; // 初始透明度
this.draw(); // 把對象繪制到頁面
}
方法封裝
//star對象原型上封裝方法
Star.prototype = {
// canvas根據數組中存在的每一個對象的小點信息開始畫
draw: function () {
ctx.beginPath();
ctx.fillStyle = this.color;
// 圖像覆蓋 顯示方式 lighter 會將覆蓋部分的顏色重疊顯示出來
ctx.globalCompositeOperation = 'lighter'
ctx.globalAlpha = this.a;
ctx.arc(this.x, this.y, 30, 0, Math.PI * 2, false);
ctx.fill();
this.updata();
},
updata() {
// 根據偏移量更新每一個小點的位置
this.x += this.vx;
this.y += this.vy;
// 透明度越來越小
this.a *= 0.98;
}
}
渲染
// 將小球渲染到頁面上
function render() {
// 每一次根據改變后數組中的元素進行畫圓圈 把原來的內容區域清除掉
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)
// 根據存在數組中的每一位對象中的信息畫圓
starlist.forEach(function (ele, i) {
ele.draw();
// 如果數組中存在透明度小的對象 ，給他去掉 效果展示逐漸消失
if (ele.a < 0.05) {
starlist.splice(i, 1);
}
});
requestAnimationFrame(render);
}
render();
本文我們首先了解了粒子特效，它大多數是HTML的新特性，使用canvas標簽創建出來的，或者說是繪制吧，canvas是畫布，但是還需要搭配js來構造動態效果，創建出好看的特效。總而言之，canvas的出現使得前端頁面變得更加豐富多彩，提高了視覺效果，對于用戶體驗進行了適當的增強，感興趣的小伙伴可以去嘗試下，鼠標滑動效果特效。
小伙伴們，快快用實踐一下吧！如果在學習過程中，有遇到任何問題，歡迎加我好友，我拉你進Python學習交流群共同探討學習。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
