文档章节

一个神奇的蛋蛋

码上有春天
 码上有春天
发布于 2016/08/25 19:04
字数 929
阅读 76
收藏 0

偶然在网上看到了一个好玩的js效果,马上拿过来研究了一番

1. 基本思路就是从一张隐藏图片中取出指定位置的像素颜色属性,在展示区域的对应位置上创建div,div的背景颜色就是对应像素的颜色。再把div都用css设置成圆角,这样看起来更像蛋蛋。然后可以对展示区域中的所有div添加鼠标移入事件:鼠标移入后当前div后,当前div立即分裂成4个大小相同、都是当前div面积 1/4的小div(程序实现上就是创建4个小div并给背景颜色,位置上正好覆盖大div,然后把大div删掉),这样就2. 能看到蛋蛋不断一个分裂成多个的过程,而且隐藏的背景图也会越来越清晰。
3. div的背景颜色算法可以是取div中心点位置对应隐藏图片上的像素点颜色。
4. 随着鼠标在展示区域不断移动过程中大div分裂成小div、div数量会不断增加,最好不要用对每一个div都动态添加鼠标事件的方式,而是对真个展示区添加事件代理。

最后放出代码:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>Document</title>
</head>
<body>
	<style id="css"></style>
	<p id="__CONTAINER_FOR_FUN" style="width: 512px; height: 512px; position: relative;"></p>
</body>
<script src="../jquery.min.js"></script>
<script>

window.onload = function() {
    var t, a, e, o, r, n, i, d, s, l, u = 512, c = [], f = $("#__CONTAINER_FOR_FUN");
    if (!f.length)
        return !1;
    if (
		t = function(t, a, e) {/*抽取颜色算法,这个没看懂*/
			var o, r, n, i, d = 0, s = 0, l = 0, f = a * t, p = (a + 1) * t, h = e * t, v = (e + 1) * t;
			for (o = f; p > o; o++)
				for (r = h; v > r; r++)
					n = c[o * u + r],
					d += n[0],
					s += n[1],
					l += n[2];
			return i = t * t,
			"rgb(" + Math.round(d / i) + ", " + Math.round(s / i) + ", " + Math.round(l / i) + ")"
		}
		,
		tt = function(x,y){/*抽取颜色算法,自己来*/
			var key = y * u + x;
			return "rgb(" + c[key][0] + ", " + c[key][1] + ", " + c[key][2] + ")";
		},
		a = function(a, r, n) {/*level,left,top */
			var i, d, s, l = [], u = Math.pow(2, a), c = 512 / u, p = 0 === a ? 1 : 2;/*c该层div的直径,p=1表示有两行两列*/
			for (i = 0; p > i; i++)/**/
				for (d = 0; p > d; d++)
					/*s = t(c / 4, n / c + i, r / c + d), 没看懂*/
					/*获取div颜色,*/
					s = tt((r + c * d) + c/2 >> 0, (n + c * i) + c/2 >> 0),/*自己来*/
					l.push('<div data-level="', a, '" data-size="', c, '" data-row="', i, '" data-col="', d, '" class="l', a, '" style="background:', s, ";top:", n + c * i, "px;left:", r + c * d, 'px;"></div>');
			//f.insertAdjacentHTML("beforeend", l.join(""))
			f.append(l.join(""));
		}
		,
		e = document.createElement("canvas"),
		e.getContext
	) {
		e.width = u;
		e.height = u;
		ee = e;

        for (o = e.getContext("2d"),
			r = new Image,
			n = [],
			i = 0; 7 >= i; i++)
				d = 512 / Math.pow(2, i),/*直径*/
				s = d / 2,/*半径*/
				n.push("div.l", i, " {position:absolute;width:", d, "px;height:", d, "px;border-radius:", s, "px;}");
		$('#css').html(n.join("")),/*一开始先把各级div的尺寸定义好,不包括位置*/
        /*Dom.insertCssText(n.join("")),*/
        l = !1,
        f.delegate("div", "mouseenter", function() {
            if (l)
                return !1;
            l = !0;
            var t = $(this)
              , e = 0 | t.attr("data-level")/*与0按位或运算,只是为了取整*/
              , o = 0 | t.attr("data-row")
              , r = 0 | t.attr("data-col")
              , n = parseInt(t.css("left"))
              , i = parseInt(t.css("top"));
            return e >= 6 ? !1 : void t.animate({
                opacity: .5
            }, 150, function() {
                t.remove(),/*把触发鼠标移入事件的div删掉*/
                a(e + 1, n, i)/*在删掉的区域加入4个新的div*/
            })
        }).delegate("div", "mouseleave", function() {
            l = !1
        }).css({
            width: "512px",
            height: "512px",
            position: "relative"
        }),
        r.onload = function() {
            var t, e, n, i, d;
			/*获取所有像素点,每个像素点都包含rgb三个子元素*/
            for (o.drawImage(r, 0, 0, u, u),
            t = o.getImageData(0, 0, u, u),
            e = 0; u * u * 4 > e; e += 4)
                n = t.data[e],
                i = t.data[e + 1],
                d = t.data[e + 2],
                c.push([n, i, d]);
            a(0, 0, 0)
        }
        ,
        r.src = "a.jpg"/*这就是隐藏图片*/
    } else
        f.css("color", "red").html("\u8bf7\u4f7f\u7528\u652f\u6301Canvas(Chrome\u3001Firefox\u3001Safari\u3001Opera\u3001IE9+)\u7684\u6d4f\u89c8\u5668\u6d4f\u89c8\u672c\u9875!")
}
;

	
</script>
</html>

 

© 著作权归作者所有

码上有春天
粉丝 5
博文 82
码字总数 55985
作品 0
广州
程序员
私信 提问
RTB技术总结--------神秘的iframe

在某个神秘的代码技术研究,被老板骂得狗血两天。 老板说,你要纵观全局,应该对RTB的思路是提出问题想法,比解决一个技术难点更加重要。 我只回了一句,没有强大的技术支持,你的破思想都是...

开源oschina
2015/05/15
454
5
关于mysql -- 测试结果

很久以前,发过一个"mysql 不是数据库的帖子", 影响至今未消. 这么长时间过去了, 我只遇到唯一一个OSC网友 @蛋蛋娃 对mysql 案例进行了一些测试. 今天我不对mysql进行任何评价. 非常感谢 @蛋蛋...

宏哥
2012/05/07
604
8
让人蛋疼的Objective-C语法

真的很蛋疼,发明这个语言的家伙肯定是因为自己的蛋疼了才发明了这个语言,然后推广这个语言的人因为蛋疼也就推了这个语言,最后蛋疼的受害者就是开发者,包括我这样的爱好者。 最蛋疼的语法...

kut
2012/01/16
700
4
新蛋网遭黑客入侵,支付页面被植入恶意代码

在过去约1个月的时间,购物网站新蛋(Newegg)的用户数据发生泄露事故,目前正在对网站进行整理。 这个网站我们可能没有听说过,但它在美国的名声可不小,据公开资料报道,其在2016年的营收就...

郭佳
2018/09/22
0
0
我的bug人生

上一周工作中遇到了一些不开心的事情,被同事背后捅了刀子,有点郁郁寡欢,我一直认为,我们搞技术的人,心境纯洁,有bug我们改一改,有加班我们就干一干,只要能让自己的程序运行起来,比什...

monster_nian
2016/01/25
46
0

没有更多内容

加载失败,请刷新页面

加载更多

java 三元表达式

例子:C=A>B ? 100 :200; 这条语句的意思是,如果A>B的话,就将100赋给C,否则就将200赋给C;

无名氏的程序员
26分钟前
5
0
针对回流和重绘的渲染优化--公司分享

如果是你,你会如何实现浏览器内核,你认为的浏览器渲染的流程是怎么样的 工作开发中,你有做过哪些关于性能优化的工作(代码),或者目前的业务中有哪些是可以做优化的 浏览器渲染机制 什么...

莫西摩西
39分钟前
3
0
html:常见行内标签,常见块级标签,常见自闭合标签

本文转载于:专业的前端网站▷html:常见行内标签,常见块级标签,常见自闭合标签 本文内容: 常见行内标签 常见块级标签 常见自闭合标签 首发日期:2018-02-12 修改: 2018-04-25:删除了不常用...

前端老手
47分钟前
3
0
终日乾乾,含章可贞@20191017

工龄7年,7年里换了两家公司,一次被动,一次主动。一次被动只有暖,一次主动冷暖皆有。第一次,只有遗憾,没有珍惜那段时光。第二次细说一下: 一、老公司 1、离职前,甲方三种态度:恭喜、...

sunny小喵
今天
4
0
zk中leader和follower启动时信息交互

QuorumPeer中读取节点状态信息,不同状态下设置不同角色 1 Leader启动Follower接收器LearnerCnxAcceptor LearnerCnxAcceptor负责接收非leader连接请求,线程中创建LearnerHandler处理器 2 Le...

writeademo
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部