Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
html,body { width:100%; height:100%; margin:0; padding:0; overflow:hidden; } .container { width:100%; height:100%; margin:0; padding:0; background-color:#000000; }
JavaScript
var RENDERER = { RESIZE_INTERVAL : 30, RADIUS : 30, MOVE_COUNT : 10, RATE : 0.95, HUE : {MIN : 200, MAX : 280}, init : function(){ this.setParameters(); this.setup(); this.reconstructMethods(); this.bindEvent(); this.render(); }, setParameters : function(){ this.$window = $(window); this.$container = $('#jsi-hex-container'); this.$canvas = $('
'); this.context = this.$canvas.appendTo(this.$container).get(0).getContext('2d'); this.hexagons = []; this.resizeIds = []; }, setup : function(){ this.hexagons.length = 0; this.resizeIds.length = 0; this.width = this.$container.width(); this.height = this.$container.height(); this.$canvas.attr({width : this.width, height : this.height}); this.lightAxis = {x : this.width / 2, y : this.height / 2, dx : 0, dy : 0, count : 0}; this.hue = (this.HUE.MIN + this.HUE.MAX) / 2; this.createHexagons(); }, createHexagons : function(){ this.radius = this.RADIUS * this.RATE; this.vertices = []; for(var i = 0; i < 6; i++){ this.vertices.push({x : this.radius * Math.sin(Math.PI / 3 * i), y : -this.radius * Math.cos(Math.PI / 3 * i)}); } this.vertices.push(this.vertices[0]); this.hexWidth = this.RADIUS * Math.cos(Math.PI / 6) * 2; this.hexHeight = this.RADIUS * (2 - Math.sin(Math.PI / 6)); this.countX = Math.ceil(this.width / this.hexWidth) + 1; this.countY = Math.ceil(this.height / this.hexHeight) + 1; var offsetX = -(this.countX * this.hexWidth - this.width) / 2, offsetY = -(this.countY * this.hexHeight - this.height) / 2; this.countX++; for(var y = 0; y < this.countY; y++){ for(var x = 0; x < this.countX; x++){ this.hexagons.push(new HEXAGON(this, offsetX + (x + 0.5) * this.hexWidth - (y % 2 == 1 ? 0 : this.hexWidth / 2), offsetY + (y + 0.5) * this.hexHeight)); } } }, watchWindowSize : function(){ while(this.resizeIds.length > 0){ clearTimeout(this.resizeIds.pop()); } this.tmpWidth = this.$window.width(); this.tmpHeight = this.$window.height(); this.resizeIds.push(setTimeout(this.jdugeToStopResize, this.RESIZE_INTERVAL)); }, jdugeToStopResize : function(){ var width = this.$window.width(), height = this.$window.height(), stopped = (width == this.tmpWidth && height == this.tmpHeight); this.tmpWidth = width; this.tmpHeight = height; if(stopped){ this.setup(); } }, reconstructMethods : function(){ this.moveLight = this.moveLight.bind(this); this.selectHexagon = this.selectHexagon.bind(this); this.watchWindowSize = this.watchWindowSize.bind(this); this.jdugeToStopResize = this.jdugeToStopResize.bind(this); this.render = this.render.bind(this); }, moveLight : function(event){ var axis = this.getAxis(event), dx = (axis.x - this.lightAxis.x) / this.MOVE_COUNT, dy = (axis.y - this.lightAxis.y) / this.MOVE_COUNT; this.lightAxis.dx = dx; this.lightAxis.dy = dy; this.lightAxis.count = this.MOVE_COUNT; this.hue = this.HUE.MIN + (this.HUE.MAX - this.HUE.MIN) * (this.width - this.lightAxis.x) / this.width; }, selectHexagon : function(event){ var axis = this.getAxis(event); for(var i = 0, count = this.hexagons.length; i < count; i++){ this.hexagons[i].select(axis.x, axis.y); } }, getAxis : function(event){ var offset = this.$container.offset(); return {x : event.clientX - offset.left + this.$window.scrollLeft(), y : event.clientY - offset.top + this.$window.scrollTop()}; }, bindEvent : function(){ this.$window.on('resize', this.watchWindowSize); this.$container.on('mousemove', this.moveLight); this.$container.on('click', this.selectHexagon); }, render : function(){ requestAnimationFrame(this.render); this.context.fillStyle = 'hsla(' + this.hue + ', 80%, 10%, 0.05)'; this.context.fillRect(0, 0, this.width, this.height); for(var i = 0, count = this.hexagons.length; i < count; i++){ this.hexagons[i].render(this.context); } this.context.save(); this.context.globalCompositeOperation = 'lighter'; var gradient = this.context.createRadialGradient(this.lightAxis.x, this.lightAxis.y, 0, this.lightAxis.x, this.lightAxis.y, this.width); gradient.addColorStop(0, 'hsla(' + this.hue + ', 80%, 30%, 0.5)'); gradient.addColorStop(1, 'hsla(' + this.hue + ', 80%, 1%, 0.5)'); for(var i = 0, count = this.hexagons.length; i < count; i++){ this.hexagons[i].renderLight(this.context, this.lightAxis, gradient); } this.context.restore(); if(this.lightAxis.count >= 0){ this.lightAxis.count--; this.lightAxis.x += this.lightAxis.dx; this.lightAxis.y += this.lightAxis.dy; } } }; var HEXAGON = function(renderer, x, y){ this.renderer = renderer; this.x = x; this.y = y; this.selected = Math.random() < this.RATE; }; HEXAGON.prototype = { VELOCITY : 2, RATE : 0.05, select : function(x, y){ if(x < this.x - this.renderer.hexWidth / 2 || x > this.x + this.renderer.hexWidth / 2 || y < this.y - this.renderer.radius || y > this.y + this.renderer.radius || y < this.y && Math.abs((x - this.x) / (y - this.y + this.renderer.radius)) > Math.tan(Math.PI / 3) || y > this.y && Math.abs((x - this.x) / (y - this.y - this.renderer.radius)) > Math.tan(Math.PI / 3)){ return; } this.selected = true; }, render : function(context){ context.save(); context.translate(this.x, this.y); context.fillStyle = this.selected ? 'hsla(' + this.renderer.hue + ', 90%, 70%, 0.3)' : 'hsla(' + this.renderer.hue + ', 90%, 30%, 0.3)'; context.beginPath(); for(var i = 0, vertices = this.renderer.vertices; i < 6; i++){ context[i == 0 ? 'moveTo' : 'lineTo'](vertices[i].x, vertices[i].y); } context.closePath(); context.fill(); context.restore(); }, renderLight : function(context, axis, color){ if(this.selected){ context.save(); context.translate(this.x, this.y); context.fillStyle = color; for(var i = 0, vertices = this.renderer.vertices; i < 6; i++){ var theta0 = Math.atan2(vertices[i].y - axis.y + this.y, vertices[i].x - axis.x + this.x), theta1 = Math.atan2(vertices[i + 1].y - axis.y + this.y, vertices[i + 1].x - axis.x + this.x); context.beginPath(); context.moveTo(vertices[i].x, vertices[i].y); context.lineTo(vertices[i + 1].x, vertices[i + 1].y); context.lineTo(vertices[i + 1].x + this.renderer.width * Math.cos(theta1), vertices[i + 1].y + this.renderer.width * Math.sin(theta1)); context.lineTo(vertices[i].x + this.renderer.width * Math.cos(theta0), vertices[i].y + this.renderer.width * Math.sin(theta0)); context.closePath(); context.fill(); } context.restore(); } this.x -= this.VELOCITY; if(this.x + this.renderer.hexWidth / 2 < 0){ this.x += this.renderer.countX * this.renderer.hexWidth; this.selected = Math.random() < this.RATE; } } }; $(function(){ RENDERER.init(); });
粒子
时间
文字
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号