JQ代码-鼠标点击页面出现小爱心

 
鼠标点击页面,出现小爱心
动画演示

下面直接附上JQ代码吧。

你可以在你的页脚引入此代码,或者加入你的JS文件中。

//鼠标点击出现爱心特效
(function (window, document, undefined) {
	var hearts = [];
	window.requestAnimationFrame = (function () {
		return window.requestAnimationFrame ||
			window.webkitRequestAnimationFrame ||
			window.mozRequestAnimationFrame ||
			window.oRequestAnimationFrame ||
			window.msRequestAnimationFrame ||
			function (callback) {
				setTimeout(callback, 1000 / 60);
			}
	})();
	init();

	function init() {
		css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
		attachEvent();
		gameloop();
	}

	function gameloop() {
		for (var i = 0; i < hearts.length; i++) {
			if (hearts[i].alpha <= 0) {
				document.body.removeChild(hearts[i].el);
				hearts.splice(i, 1);
				continue;
			}
			hearts[i].y--;
			hearts[i].scale += 0.004;
			hearts[i].alpha -= 0.013;
			hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
		}
		requestAnimationFrame(gameloop);
	}

	function attachEvent() {
		var old = typeof window.onclick === "function" && window.onclick;
		window.onclick = function (event) {
			old && old();
			createHeart(event);
		}
	}

	function createHeart(event) {
		var d = document.createElement("div");
		d.className = "heart";
		hearts.push({
			el: d,
			x: event.clientX - 5,
			y: event.clientY - 5,
			scale: 1,
			alpha: 1,
			color: randomColor()
		});
		document.body.appendChild(d);
	}

	function css(css) {
		var style = document.createElement("style");
		style.type = "text/css";
		try {
			style.appendChild(document.createTextNode(css));
		} catch (ex) {
			style.styleSheet.cssText = css;
		}
		document.getElementsByTagName('head')[0].appendChild(style);
	}

	function randomColor() {
		return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
	}
})(window, document);

下面JQ代码是升华版, 点击页面出现富强、民主这类文字动画效果因为动画效果用的是CSS3 animation,因此,IE9及其以下浏览器无效果。

<script>
var fnTextPopup = function (arr, options) {
    // arr参数是必须的
    if (!arr || !arr.length) {
        return;    
    }
    // 主逻辑
    var index = 0;
    document.documentElement.addEventListener('click', function (event) {
        var x = event.pageX, y = event.pageY;
        var eleText = document.createElement('span');
        eleText.className = 'text-popup';
        this.appendChild(eleText);
        if (arr[index]) {
            eleText.innerHTML = arr[index];
        } else {
            index = 0;
            eleText.innerHTML = arr[0];
        }
        // 动画结束后删除自己
        eleText.addEventListener('animationend', function () {
            eleText.parentNode.removeChild(eleText);
        });
        // 位置
        eleText.style.left = (x - eleText.clientWidth / 2) + 'px';
        eleText.style.top = (y - eleText.clientHeight) + 'px';
        // index递增
        index++;
    });    
};

fnTextPopup(['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善']);
</script>

JQ代码搞定,那还要css代码才能看到效果

<style>
.text-popup {
    animation: textPopup 1s;
    color: red;
    user-select: none;
    white-space: nowrap;
    position: absolute;
    z-index: 99;
}
@keyframes textPopup {
    0%, 100% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        transform: translateY(-50px);    
    }
}
</style>
48.89% (66) 次Baidu访问
2.96% (4) 次360访问
22.96% (31) 次Google访问
9.63% (13) 次Sogou访问
4.44% (6) 次bingbot访问
11.11% (15) 次sm访问
  • 蜘蛛:Baidu,66次,更新时间:2019-05-20 19:37:43
  • 蜘蛛:360,4次,更新时间:2019-05-17 05:07:23
  • 蜘蛛:Google,31次,更新时间:2019-05-17 01:50:45
  • 蜘蛛:Sogou,13次,更新时间:2019-05-23 15:42:04
  • 蜘蛛:bingbot,6次,更新时间:2019-05-16 22:09:13
  • 蜘蛛:sm,15次,更新时间:2019-05-10 02:32:01

参与评论