Maison > Article > interface Web > Comment faire flotter un motif en forme de cœur lorsque vous cliquez avec la souris
Comment faire flotter un motif en forme de cœur lorsque vous cliquez avec la souris
- php中世界最好的语言original
- 2018-06-08 14:10:102033parcourir
Cette fois, je vais vous montrer comment faire flotter un motif en forme de cœur lorsque vous cliquez avec la souris. Quelles sont les précautions à prendre pour faire flotter un motif en forme de cœur lorsque vous cliquez avec la souris. Voici un cas pratique, jetons un coup d'oeil.
L'exemple de cet article décrit comment jQuery peut obtenir l'effet sympa d'un flottement en forme de cœur lors d'un clic de souris. Partagez-le avec tout le monde pour référence, les détails sont les suivants :
Cliquez une fois sur la souris, un cœur ❤ s'affichera au-dessus de la souris et il disparaîtra lentement vers le haut, comme indiqué ci-dessous :
N'est-ce pas très cool ? Il suffit de coller le code directement :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript">
$(function(){
var height=$(window).width();
$('#test').css({
'height':height,
});
var n=1;
$('#test').click(function(e){
if(n%2==0){
var $i=$('<b></b>').text('你点击了一下');//双数显示这个
}else{
var $i=$('<b></b>').text('❤');//单数显示这个
}
n++;
var x=e.pageX,y=e.pageY;//获取鼠标点击的位置坐标
$i.css({
"z-index": 9999,
"top": y - 20,
"left": x,
"position": "absolute",
"color": 'red',
"font-size": 14,
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
}, 1500, function() {
$i.remove();
});//设置动画
});
});
</script>
</head>
<body>
<p id="test">
</p>
</body>
</html>
Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour en savoir plus. informations passionnantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !
Lecture recommandée :
Utilisation des composants vue dans des cas pratiques
Fonction spécifiée de page d'impression angulaire
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!