Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { height: 100vh; width: 100vw; overflow: hidden; margin: 0; } canvas { margin: auto; width: 100vw; height: 100vh; background: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
JavaScript
console.clear(); var canvas = document.querySelector('#scene'); var ctx = canvas.getContext('2d'); var width, height; var amount = 500; var dots = []; var dpi = window.devicePixelRatio > 1.5 ? 2 : 1; var ww, wh; function init () { ww = window.innerWidth * dpi; wh = window.innerHeight * dpi; width = ww < wh ? ww * 0.8 : wh * 0.8; height = width; canvas.width = ww; canvas.height = wh; canvas.style.width = ww + "px"; canvas.style.height = wh + "px"; if (dpi === 2) { canvas.style.transform = 'translate(-50%, -50%) scale(0.5)'; } dots = []; for (var i = 0; i < amount; i++) { dots.push(new Dot(i)); } } function Dot (i) { var index = (i / amount); var ratio = index * Math.PI * 40; this.radius = (width / 2 - 60) * index; this.index = index; this.x = Math.sin(ratio) * this.radius + (ww / 2); this.y = Math.cos(ratio) * this.radius + (wh / 2); this.r = index * 50; this.alpha = index; TweenMax.to(this, 1, { r: 1, ease: Power1.easeOut, yoyo: true, repeat: -1, delay: index * -3 }); } ctx.lineWidth = dpi; Dot.prototype.draw = function () { ctx.beginPath(); ctx.globalAlpha = this.alpha; ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); ctx.stroke(); } Dot.prototype.update = function () { var ratio = this.index * Math.PI * (40 + mouse.x * 0.4); this.x = Math.sin(ratio) * (this.radius + (mouse.y * 40)) + (ww / 2); this.y = Math.cos(ratio) * (this.radius + (mouse.y * 40)) + (wh / 2); } function render () { requestAnimationFrame(render); ctx.clearRect(0, 0, ww, wh); for (var i = 0; i < dots.length; i++) { dots[i].update(); dots[i].draw(); } } var resizeTimeout; window.addEventListener('resize', () => { resizeTimeout = window.clearTimeout(resizeTimeout); resizeTimeout = window.setTimeout(init, 500); }) var mouse = { x: 0, y: 0 }; window.addEventListener('mousemove', (e) => { TweenMax.to(mouse, 3, { x: ((e.clientX - (window.innerWidth / 2)) / window.innerWidth) * 2, y: (e.clientY / window.innerHeight), ease: Power1.easeOut }); }); window.addEventListener('touchmove', (e) => { TweenMax.to(mouse, 3, { x: ((e.touches[0].clientX - (window.innerWidth / 2)) / window.innerWidth) * 2, y: (e.touches[0].clientY / window.innerHeight), ease: Power1.easeOut }); }); init(); requestAnimationFrame(render);
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>曼陀罗-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号