纯Jquery做情人节ILOVEYOU鼠标特效

本文主要是介绍纯Jquery做情人节ILOVEYOU鼠标特效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

手写代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>爱心</title>
<style type="text/css">
fs{ position:absolute; line-height:100px; margin:}
</style>
<script type="text/javascript" src="jquery-3.6.0.min.js" ></script>
<script type="text/javascript">
var count=0;
$(document).ready(function(){
var yesr=prompt("给你们的爱打分，请输入0-100的数字！","");
if(isNaN(yesr)){
alert("喂！打数字啊！赶紧刷新！");
return;}
if(yesr==0){
$("body").append("<h1>没爱了吗？哪怕一分也好啊！</h1>");
setInterval("alert('没爱了吗？')","1000");
return;}
   $("body").append("<div id='div_d'></div>");
$("#div_d").append("<ul class='ul_u'></ul>");
for(var i=0;i<yesr;i++){
   $(".ul_u").append("<li>我的世界</li>");
   }
$(".ul_u").css({"list-style":"none","font":"bold 20px 微软雅黑","text-align":"center"});
   $(".ul_u li").css({"float":"left","width":"100px","height":"100px","line-height":"100px","padding":"10px","margin":"20px"});
   $("ul>li:even").css("background-color","#FCF");
   $("ul>li:odd").css("background-color","yellow");

$("ul>li").mouseover(function(){
$(this).css({"background-color":"red",
       "width":"200px","height":"200px","line-height":"200px",
       "font-size":"50px","color":"#FFF"}).html("I LOVE YOU").hide(1000);
});
$("ul>li").mouseout(function(){
$(this).css({"background-color":"#FCF",
       "width":"100px","height":"100px","line-height":"100px",
       "font-size":"50px","color":"red"}).html("ME TOO").show(1000);
});
$("ul>li").click(function(){
           alert($(this).html());
           });
   });

</script>
</head>

<body>

</body>
</html>