<h4>只需要引入一个id为lanren的div，外加js以及css即可实现这种效果,当然，css3的效果，低版本浏览器下无法实现,尽可能少的代码，方便使用的html css js,才是我们追求的极致!
前言: (写在文前的只言片语、意书情殇)长歌破晓穿云过,响彻碧霄振九天.)------Jason Zhang
web开发已现世多年,技术成熟且学习平台广泛,笔者针对其中细节从本质上进行解释.力求透彻.
</h4>
<h5>说明:可以在复选框的任意点击都会出现效果!</h5>
废话不多说,先上效果.
首先定义一个id为lanren的div.
<pre>
<div id="lanren"></div>
</pre>
第二css也非常简单,自定义一个动画,详情请继续向下看∨
<pre>
.wrapper{ overflow:hidden; margin:0 auto; position:relative;}
.wrapper input{position:absolute}
.wrapper 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)}
}
</pre>
到了最重要的时候了,最核心的代码,先创建input复选框标签然后添加到div上,..详情请往下面看∨
<pre>
<script>
var RES_X = 20;//横向创建input
var RES_Y = 20;//竖向创建input
var SIZE = 22;
if (/iphone|ipad|android/ig.test(navigator.userAgent)) {
RES_X = 10;
RES_Y = 10;
SIZE = 25
}
var entities = [];
var wrapper = document.getElementById('lanren');
wrapper.className = 'wrapper';
wrapper.style.width = (RES_X * SIZE) + 'px';
wrapper.style.height = (RES_Y * SIZE) + 'px';
for (var x = 0; x < RES_X; x++) {
for (var y = 0; y < RES_Y; y++) {
var el = document.createElement('input');
el.setAttribute('type', 'checkbox');
wrapper.appendChild(el);
var entity = {
element: el,
x: x * SIZE,
y: y * SIZE
}
el.style.left = entity.x + 'px';
el.style.top = entity.y + 'px';
el.addEventListener('change', this.toggle.bind(this, entity));
entities.push(entity)
}
}
function toggle(targetEntity) {
var checked = targetEntity.element.checked;
entities.forEach(function(entity) {
var dx = targetEntity.x - entity.x;
var dy = targetEntity.y - entity.y;
var distance = Math.sqrt(dx * dx + dy * dy);
setTimeout(function() {
entity.element.checked = checked;
entity.element.className = '';
entity.element.offsetWidth;
entity.element.className = 'grow'
}, Math.round(distance * 1.8))
})
}
setTimeout(function() {
entities[0].element.checked = true;
toggle(entities[0])
}, 800);
</script>
</pre>
笔没墨了!
欲知详情,下节再讲!!!
