网站首页 > 教程文章正文

JQuery实现页面点击产生文字和爱心效果

jxf315 2024-12-01 07:28:08 教程文章 64 ℃

1、思路：

在页面元素上绑定点击事件，当鼠标点击时生成新元素并将其添加至页面中，间隔一定时间后在移除。

2、js代码：

//在html文档中<head></head>之间添加引入的JQuery文件路径，可以是本地或者CDN
//百度CDN: <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
<script >
			$(document).ready(function(){
				$('#div_id').text('</>');
				var f_idx = 0;
				var c_idx = 0;
				var x,y;
				var txt,color;
				$('body').click(function(e){

				txt = new Array("?富强?","?民主?","?文明?","?和谐?","?自由?","?平等?","?公正?","?法治?","?爱国?","?敬业?","?诚信?","?友善?");
				color = new Array("#eb4310","#f6941d");
					$i = $("<span></span>");
					$i.text(txt[f_idx]);
					f_idx = (f_idx + 1)%txt.length;
					c_idx = (c_idx + 1)%color.length;
					
					x = e.pageX;
					y = e.pageY;
					//console.log(e.pageX+","+e.pageY);
					//console.log('txt index: '+f_idx +' color index: '+c_idx);
				$i.css({
					"z-index": 666666 ,
					"top": y - 20,
					"left": x+50,
					"position": "absolute",
					"font-weight": "bold",
					"color": color[c_idx]
				});
				$('body').append($i);
				$i.stop().animate({
					"top": y - 180,
					"opacity": 0,
					"font-size":6,
					},3500,"linear",function(){ $i.remove(); });
				});
			});
		</script>

3、效果

4、结语：这个效果使用JQuery实现简单也很简洁，同样也可以原生JS实现，不过要自己完成有关动画函数。之前没有学过前端JS，但觉得用JQuery这个库实现这些效果还是挺有趣的。这里放下学习JS和JQuery的链接(https://www.runoob.com/js/js-tutorial.html),有需要可以看看。

上一篇：文字来找茬(文本对比工具)
下一篇： Web开发小技巧放送 - 如何使用包含运算符进行过滤

网站首页 > 教程文章 正文

JQuery实现页面点击产生文字和爱心效果

猜你喜欢

网站首页 > 教程文章正文