鼠标点击一下,在鼠标上方显示一个爱心❤,并有慢慢向上消失的效果,如下图
是不是很炫酷,直接贴代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script type="text/javascript" src="./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('❤666');//单数显示这个
}
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>
<div id="test">
</div>
</body>
</html>
主要运用了css的animate特效，这个我会在后面文章总结
.
相关推荐
本压缩包“jQuery各类炫酷效果demo”包含了一系列使用jQuery实现的精彩示例，旨在帮助开发者更好地理解和应用jQuery。 首先，让我们详细探讨一些在描述中提到的效果： 1. **表单验证**：jQuery提供了方便的API来...
本文实例讲述了jQuery实现鼠标点击处心形漂浮的炫酷效果。分享给大家供大家参考，具体如下： 鼠标点击一下,在鼠标上方显示一个爱心:red_heart:,并有慢慢向上消失的效果,如下图： 是不是很炫酷,直接贴代码: <!...
在实现鼠标点击页面效果时，我们可能需要利用jQuery的`click()`事件处理函数，当用户点击页面上的元素时，触发相应的动作。例如，点击按钮时，可以改变按钮的背景色、显示加载动画，或者触发Ajax请求验证用户凭据。...
《jQuery鼠标点击弹出粒子效果动画详解》 在网页设计中，动态效果的运用能够极大地提升用户体验，使得网站更具吸引力。jQuery作为一款强大的JavaScript库，提供了丰富的功能来帮助开发者实现各种复杂的交互效果。...
总结来说，实现"jQuery炫酷鼠标滑过菜单高亮菜单项动画特效"主要包括以下几个步骤： 1. 设置HTML菜单结构。 2. 引入jQuery库。 3. 使用jQuery的`mouseenter`和`mouseleave`事件监听鼠标行为。 4. 添加和移除CSS类以...
这些插件可以快速扩展jQuery的功能，实现各种炫酷效果。 6. **响应式设计**：随着移动设备的普及，响应式设计变得至关重要。jQuery可以辅助实现这一目标，例如通过`resize()`事件监听窗口大小变化，动态调整布局。 ...
本主题聚焦于使用jQuery实现的10种鼠标悬停炫酷效果，这些效果能够为网页增添动态美感，吸引用户的注意力，从而提高网站的吸引力和用户参与度。 1. **平滑过渡**：jQuery可以轻松实现元素在鼠标悬停时的平滑过渡...
在本文中，我们将深入探讨如何使用jQuery来实现一个炫酷的下拉时间轴效果。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作和Ajax交互，使得创建交互式网页变得更加简单。 首先，理解...
这是一款效果非常炫酷的jQuery和CSS3炫酷按钮点击波特效。该特效当用户在菜单按钮上点击的时候，从鼠标点击的点开始，会有一道光波以改点为原点向外辐射的动画效果，非常绚丽。
jquery.ripples是一款基于WebGL的效果非常炫酷的元素背景水波涟漪jQuery特效插件。该jQuery插件通过强大的WebGL，可以在指定的元素上添加一个水波层，制作出水波涟漪的炫酷效果，并且可以使用鼠标来和它进行互动。
在这个主题中，我们聚焦于一个特定的效果插件——jQuery.hoverfold，它为网页中的图片添加了炫酷的3D折叠效果。 jQuery.hoverfold插件的核心功能是当用户鼠标滑过图片时，能够引发一种3D折叠或弯曲的视觉效果。这种...
在描述中提到，“跟随鼠标出现各种各样的炫酷效果，鼠标到哪里这个就显示在哪里”，这可能是通过JavaScript的`onmousemove`事件来监听鼠标移动，并在事件触发时更新页面元素的位置或状态。同时，可能使用CSS3的动画...
本资源"jQuery实现的5款不同炫酷样式的自定义下拉框选择列表插件源码.zip"包含了五个使用jQuery编写的自定义下拉框插件，这些插件为传统的HTML `<select>`元素提供了更丰富、更吸引人的视觉效果和交互体验。...
在本压缩包中，"jQuery实现炫酷轮播图效果的Lightbox弹出层插件.zip"包含了一个使用jQuery编写的Lightbox插件，用于实现轮播图的炫酷弹出效果。Lightbox是一种常见的网页设计模式，当用户点击图片链接时，会在当前...
在本文中，我们将深入探讨如何使用jQuery和CSS3来实现一款炫酷的鼠标滑过图片显示遮罩层的特效。这种特效广泛应用于网页设计中，为用户提供了丰富的交互体验，尤其是在图片展示、相册功能或者产品展示方面。 首先，...
在实现滚动条效果时，我们可以利用jQuery提供的API来控制页面滚动，并添加动态效果。 1. **引入jQuery库**：在HTML文档中，我们需要引入jQuery库。通常，我们通过CDN（内容分发网络）链接来获取最新的jQuery版本，...
"炫酷鼠标滑过超链接动画特效jQuery插件"，即"anchor-hover-effect"，是提升网页动态视觉效果的一个优秀工具。这款插件专为jQuery设计，旨在让超链接在鼠标滑过时产生吸引人的动画效果，从而增强用户对网页的感知和...
本资源“jQuery+CSS3实现响应式鼠标悬停图片边框炫酷动画特效源码.zip”提供了利用这两种技术实现动态效果的方法，旨在帮助开发者创建引人入胜的交互体验。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM...
以下将详细讨论如何使用jQuery实现三种炫酷的图片播放效果。 1. **幻灯片轮播** 幻灯片轮播是最常见的图片播放方式之一。通过jQuery，我们可以轻松地实现自动切换图片、添加过渡效果、控制按钮等功能。例如，可以...