jQuery实现爱心点赞功能代码示例

本文主要介绍了如何使用jQuery实现一个简单的爱心点赞功能，适用于各种网站和应用中常见的互动元素。作者首先介绍了HTML结构，包括在body中创建一个按钮（id为"btn1"），这个按钮用于触发点赞操作，以及一个空的div（id为"demo"）用来显示点赞的心形图标。 CSS部分对按钮和心形图标进行了样式设置，将按钮定位在底部中心附近，设置了蓝色背景和清晰的字体，而心形图片则设置为绝对定位，初始时位于按钮下方100px，通过调整`left`属性模拟向上飘动的效果。 jQuery代码的核心部分是点赞逻辑。首先，使用`$(document).ready()`确保DOM加载完成后再执行后续操作。在按钮被点击时，会执行以下步骤： 1. 绑定点击事件，当用户点击"#btn1"时，事件处理程序开始执行。 2. 随机生成一个数字（1, 2, 或 3），代表不同的心形图片，通过`Math.random()`和数组索引实现。 3. 使用`$(“”)`动态创建一个新的`<img>`元素，并设置其src属性为预定义的图片路径，如"./images/" + num + ".png"。 4. 将生成的图片添加到页面上，具体到"#demo"元素内部。 5. 最后，使用`.animate()`方法为图片添加一个动画效果，使其从点击位置向上移动。动画过程中，随机生成一个0到800的值作为图片初始位置的偏移量，使得每次点赞时心形图标的位置有所不同，从而营造出动态飘动的视觉效果。 这篇教程详细展示了如何利用jQuery结合CSS和HTML创建一个基础的爱心点赞功能，通过动态加载图片和动画效果，提升了用户的交互体验。读者可以根据需要进一步扩展功能，比如增加点赞计数、用户登录关联等。