写了一个画蜂巢的js

最新推荐文章于 2023-10-31 15:55:12 发布

唔无误

最新推荐文章于 2023-10-31 15:55:12 发布

阅读量721

点赞数 1

分类专栏： html+js+css 文章标签： html js css

本文链接：https://blog.csdn.net/qq_40907356/article/details/109628159

版权

html+js+css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

写了一个画蜂巢的插件

应该还存在很多问题，写的也特别简单，就记录一下。

效果如下：

(function($) {
	'use strict';
	var honeycomb = function(element, options) {
		
		this.$element=element;
		this.options = $.extend({}, honeycomb.opts, options);
		this.init();
	}
	honeycomb.opts = {
		style: "<style>.nav{position:relative;float:left;display:inline-block;margin-top:31px;margin-right:1px;width:100px;height:58px;background:#ffffff;color:#333;text-align:center;text-decoration:none;font-size:14px;line-height:58px}.nav s{position:absolute;top:-30px;left:0;display:block;overflow:hidden;width:0;height:0;border-right:50px dotted transparent;border-bottom:30px solid #ffffff;border-left:50px dotted transparent}.nav b{position:absolute;bottom:-30px;left:0;display:block;overflow:hidden;width:0;height:0;border-top:30px solid #ffffff;border-right:50px dotted transparent;border-left:50px dotted transparent}</style>",
		size: 3
	};

	function Plugin(option) {
		return this.each(function() {
			var $this = $(this);
			var data = $this.data('lgb.honeycomb');
			var options = typeof option === 'object' && option;
			$this.data('lgb.honeycomb', data = new honeycomb(this, options));
			if (typeof option === 'string') data[option]();
		});
	}

	$.fn.honeycomb = Plugin;
	$.fn.honeycomb.Constructor = honeycomb;
	var _proto = honeycomb.prototype;
	_proto.init = function() {
		$("body").append(this.options.style);
		var rows = this.options.size;
		var ele=this.$element;
		var count = 3 * rows * (rows - 1) + 1;
		for (var i = 1; i <= count; i++) {
			$(ele).append('<a class="nav"><s></s><div>' + i + '</div><b></b></a>');
		}
		var hightlist = rows; //上半部分包中建行 的行数
		var maxlincount = hightlist + (hightlist - 1); //中间行数量
		$(ele).css('width', maxlincount * 100 + maxlincount + "px")
		$(ele).children().eq(0).css("margin-left", (maxlincount - hightlist) * 50 + "px");
		var upcount = [hightlist];
		for (var i = 1; i < hightlist; i++) {
			var index = 0;
			$.each(upcount, function(i, e) {
				index += e
			});
			upcount.push(upcount[upcount.length - 1] + 1);
			$(ele).children().eq(index).css("margin-left", (maxlincount - hightlist - i) * 50 + "px");
		}
		var uplength = (maxlincount + hightlist) * hightlist / 2;
		for (var i = 1; i < hightlist; i++) {
			var index = 0;
			$.each(upcount, function(i, e) {
				index += e
			});
			upcount.push(upcount[upcount.length - 1] - 1);
			$(ele).children().eq(index).css("margin-left", i * 50 + "px");
		}
		$(ele).height(((rows-1)*2+1)*90+30);
	}
})(jQuery);

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/honeycomb.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.wrap {
				display: inline-block;
				background-color: #ddd;
				margin:0 auto;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div id="">
				首行数量<input type="number" name="" id="number" value="10" min="1" />
			</div>
			<div class="wrap">
			</div>
		</div>
		<script>
			var a;
			$("#number").on("change", function() {
				if (parseInt($(this).val()) <= 0) {
					alert("首行数量不能小于1");
					return;
				}
				$(".wrap").html("");
				$(".wrap").honeycomb({
					size: parseInt($(this).val())
				});

			})
			a = $(".wrap").honeycomb({
				size: 10
			}); //容器，第一行数量
		</script>
	</body>
</html>

可以直接复制下来测试

唔无误

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
写了一个画蜂巢的js

写了一个画蜂巢的插件应该还存在很多问题，写的也特别简单，就记录一下。效果如下：js(function($) { 'use strict'; var honeycomb = function(element, options) { this.$element=element; this.options = $.extend({}, honeycomb.opts, options); this.init(); } honeycomb.opts = { styl
复制链接

扫一扫