逛网站的时候遇到一个有趣的鼠标点击事件:
点击鼠标会有 文字不显示 ,上漂一定时间后消失。
现记录作为收藏
具体代码:
(function() {
var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"]
, index = Math.floor(Math.random() * coreSocialistValues.length);
document.body.addEventListener('click', function(e) {
if (e.target.tagName == 'A') { return; }
var x = e.pageX
, y = e.pageY
, span = document.createElement('span');
span.textContent = coreSocialistValues[index];
index = (index + 1) % coreSocialistValues.length;//取模循环
span.style.cssText = ['z-index: 9999999; position: absolute; font-weight: bold; color: #ff6651; top: ', y - 20, 'px; left: ', x, 'px;'].join(''); document.body.appendChild(span); animate(span); });
function animate(el) {//动画 var i = 0 , top = parseInt(el.style.top) , id = setInterval(frame, 16.7); function frame() {//帧 if (i > 180) { clearInterval(id); el.parentNode.removeChild(el); } else { i += 2; el.style.top = top - i + 'px'; el.style.opacity = (180 - i) / 180; } } }
}());
思考
做个鼠标点击后显示一个爱心的绘制动画?