JS特效:鼠标左键弹出社会主义核心价值观

    选择打赏方式

访客在网站上点击屏幕的时候,会弹出“富强、民主、和谐...”文字特效,下面就给大家分享JS代码,三种方法实现:

原生JS:

window.onload = () = >{
	let i = 0;
	let body = document.getElementsByTagName("body")[0];
	body.onclick = function(e) {
		const a = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
		let span = document.createElement("span");
		span.innerText = a[(i++) % a.length];
		let x = e.pageX;
		let y = e.pageY;
		span.style.cssText = "z-index:999999999999999999999999;top:" + (y - 20) + "px;left:" + x + "px;position:absolute;font-weight:bold;color:#ff6651;";
		body.appendChild(span);
		animate(span, {
			"top": y - 180,
			"opacity": 0
		},
		15, 0.01,
		function() {
			body.removeChild(span)
		})
	}
	function animate(obj, json, interval, sp, fn) {
		clearInterval(obj.timer);
		function getStyle(obj, arr) {
			if (obj.currentStyle) {
				return obj.currentStyle[arr]
			} else {
				return document.defaultView.getComputedStyle(obj, null)[arr].replace(/px/g, "")
			}
		}
		obj.timer = setInterval(function() {
			var flag = true;
			for (var arr in json) {
				var icur = 0;
				if (arr == "opacity") {
					icur = Math.round(parseFloat(getStyle(obj, arr)) * 100)
				} else {
					icur = parseInt(getStyle(obj, arr))
				}
				var speed = (json[arr] - icur) * sp;
				speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
				if (icur != json[arr]) {
					flag = false
				}
				if (arr == "opacity") {
					obj.style.filter = "alpha(opacity : '+(icur + speed)+' )";
					obj.style.opacity = (icur + speed) / 100
				} else {
					obj.style[arr] = icur + speed + "px"
				}
			}
			if (flag) {
				clearInterval(obj.timer);
				if (fn) {
					fn()
				}
			}
		},
		interval)
	}
}
jQuery:

var a_idx = 0;
jQuery(document).ready(function($) {
	$("body").click(function(e) {
		var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
		var $i = $("<span />").text(a[a_idx]);
		a_idx = (a_idx + 1) % a.length;
		var x = e.pageX,
		y = e.pageY;
		$i.css({
			"z-index": 999999999999999999999999,
			"top": y - 20,
			"left": x,
			"position": "absolute",
			"font-weight": "bold",
			"color": "#ff6651"
		});
		$("body").append($i);
		$i.animate({
			"top": y - 180,
			"opacity": 0
		},
		1500,
		function() {
			$i.remove()
		})
	})
});
另一种jQuery思路:

jQuery(document).ready(function($) {
	let i = 0;
	$("body").click(function(e) {
		let a = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
		let $i = $("<span/>").text(a[(i++) % a.length]);
		let x = e.pageX;
		let y = e.pageY;
		$i.css({
			"z-index": 999999999999999999999999,
			"top": y - 20,
			"left": x,
			"position": "absolute",
			"font-weight": "bold",
			"color": "#ff6651"
		});
		$("body").append($i);
		$i.animate({
			"top": y - 180,
			"opacity": 0
		},
		1500, () = >{
			$i.remove()
		})
	})
});

版权声明:若无特殊注明,本文为《小傲世》原创,转载请保留文章出处。
本文链接:https://pjax.vip/235.html
正文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

呵呵 哈哈 吐舌 开心 笑眼 可怜 乖 啊 你懂得 不高兴 生气 汗 黑线 哭 真棒 阴险 鄙视 酷 滑稽 纳尼 疑问 委屈 惊讶 勉强

评论信息框
可使用QQ号实时获取昵称+头像

私密评论

吃奶的力气提交吐槽中...


既然没有吐槽,那就赶紧抢沙发吧!