Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body{background-color: #2D2D2D} #triangle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } input { position: absolute; margin: 4px; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input.grow { -webkit-animation: grow 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-animation: grow 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: grow 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @-webkit-keyframes grow { 0% { -webkit-transform: scale(1); } 30% { -webkit-transform: scale(2.5); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes grow { 0% { -moz-transform: scale(1); } 30% { -moz-transform: scale(2.5); } 100% { -moz-transform: scale(1); } } @keyframes grow { 0% { transform: scale(1); } 30% { transform: scale(2.5); } 100% { transform: scale(1); } } p.attribution { margin: 0; padding: 0; position: absolute; right: 20px; bottom: 20px; } .attribution a { color: #333; font-family: 'PT Sans Narrow', sans-serif; }
JavaScript
var w, h, triangle, checkboxes; var SQRT_3 = Math.pow(3, 0.5); window.onload = function() { triangle = document.getElementById('triangle'); buildTriangle(); }; window.onresize = function() { buildTriangle(); }; var buildTriangle = function() { var a = calcA(); var h = SQRT_3 * 0.5 * a; var s = 20; var RES_X = Math.round(a / s); var RES_Y = Math.round(h / s); var xOff = 0; // See how many cheboxes we can fit in y direction // before the x count becomes zero RES_Y = calcYCount(RES_X, RES_Y); checkboxes = []; triangle.style.width = RES_X * s + 'px'; triangle.style.height = RES_Y * s + 'px'; // Remove all checkboxes if re-building while (triangle.firstChild) { triangle.removeChild(triangle.firstChild); } for (var y = RES_Y-1; y >= 0; y--) { for (var x = 0; x < RES_X; x++) { buildCheckBox(x * s + xOff, y * s); } RES_X = (RES_X === 2) ? RES_X -= 1 : RES_X -= 2; xOff = (RES_X === 1) ? xOff += s * 0.5 : xOff += s; } }; var calcYCount = function(RES_X, RES_Y) { var yCount = 0; for (var y = RES_Y-1; y >= 0; y--) { if (RES_X > 0) yCount++; RES_X = (RES_X === 2) ? RES_X -= 1 : RES_X -= 2; } return yCount; }; var buildCheckBox = function(x, y) { var el = document.createElement('input'); el.setAttribute('type', 'checkbox'); triangle.appendChild(el); var checkbox = { el: el, x: x, y: y }; el.style.left = checkbox.x + 'px'; el.style.top = checkbox.y + 'px'; el.addEventListener('change', this.toggle.bind(this, checkbox)); checkboxes.push(checkbox); }; var calcA = function() { w = window.innerWidth * 2 / 3; h = window.innerHeight * 2 / 3; return Math.min(w, h); }; var map = function (n, start1, stop1, start2, stop2) { return (n - start1) / (stop1 - start1) * (stop2 - start2) + start2; }; var toggle = function (targetCheckbox) { var checked = targetCheckbox.el.checked; checkboxes.forEach(function(checkbox) { var dx = targetCheckbox.x - checkbox.x; var dy = targetCheckbox.y - checkbox.y; var distance = Math.sqrt( dx * dx + dy * dy ); setTimeout(function() { checkbox.el.checked = checked; // re-run the animation, reading offsetWidth forces reflow checkbox.el.className = ''; checkbox.el.offsetWidth; checkbox.el.className = 'grow'; }, Math.round( distance * 1.8 ) ); }); }; setTimeout( function() { checkboxes[0].el.checked = true; toggle(checkboxes[0]); }, 500);
粒子
时间
文字
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号