技能特效源码(js特效源码)
技能特效源码(js特效源码)
技能特效在网页设计中有着非常重要的作用,能够为网站注入活力和美感。而js特效是实现技能特效的重要工具之一,下面我们将介绍一些常用的技能特效源码。
1. 进度条特效:
<div id=\progress\gt; <div class=\progress-bar\gt;</div> </div> <script> var progressBar = document.querySelector('.progress-bar'); var width = 0; setInterval(function() { if (width < 100) { width++; progressBar.style.width = width + '%'; } }, 50); </script>2. 饼图特效:
<div id=\pie-chart\gt; <canvas width=\200\ height=\200\gt;</canvas> <span class=\percent\gt;</span> </div> <script> var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); var percentSpan = document.querySelector('.percent'); var percent = 0; var interval = null; function drawPie() { context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.moveTo(canvas.width / 2, canvas.height / 2); context.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, Math.PI * 2 * percent / 100); context.closePath(); context.fillStyle = '#ff0000'; context.fill(); percentSpan.innerHTML = percent + '%'; } interval = setInterval(function() { if (percent < 100) { percent++; drawPie(); } }, 50); </script>3. 折线图特效:
<div id=\line-chart\gt; <canvas width=\400\ height=\200\gt;</canvas> </div> <script> var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); var data = [20, 50, 80, 30, 70, 50, 90]; var interval = null; function drawLine() { context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.moveTo(0, canvas.height - data[0]); for (var i = 1; i < data.length; i++) { context.lineTo(canvas.width / (data.length - 1) * i, canvas.height - data[i]); } context.strokeStyle = '#ff0000'; context.stroke(); } interval = setInterval(function() { if (data[0] < 100) { for (var i = 0; i < data.length; i++) { data[i]++; } drawLine(); } }, 50); </script>总结: 以上就是几种常用的技能特效源码,希望能为大家在网页设计中提供一定的帮助。而对于js特效源码的学习,需要不断练习和实践,才能够熟练掌握和灵活运用。
热门推荐