前端鼠标点击特效

鼠标点击特效

添加鼠标点击特效,(“富强”, “民主”, “文明”, “和谐”, “自由”, “平等”, “公正” ,”法治”, “爱国”, “敬业”, “诚信”, “友善”)等。

<script type="text/javascript">
/* 鼠标点击特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
        y = e.pageY;
        $i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#ff6651"
        });
        $("body").append($i);
        $i.animate({
"top": y - 180,
"opacity": 0
        },
        1500,
function() {
            $i.remove();
        });
    });
});
</script>

效果

如图
鼠标点击特效效果

原文:https://laod.cn/design/page/javascript-texiao.html

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
可以使用 HTML、CSS 和 JavaScript 来实现生日快乐烟花特效。 首先,需要创建一个 HTML 页面,其中包含一个 canvas 元素,用于绘制烟花。然后,使用 CSS 设置 canvas 的样式,使其占据整个屏幕。 接下来,使用 JavaScript 编写绘制烟花的代码。可以使用类来封装烟花的属性和方法,例如位置、颜色、速度、加速度、绘制方法等。在页面加载时,创建一组烟花对象,并将它们添加到一个数组中。 随着时间的推移,每个烟花都会不断更新自己的位置和速度,并在画布上绘制自己的形状。当烟花达到一定高度时,会爆炸成若干个小火花,每个小火花也会不断更新自己的位置和速度,并在画布上绘制自己的形状,直到消失。 最后,可以在页面上添加一些事件监听器,例如鼠标点击事件,当用户点击屏幕时,会发射一枚烟花,并在画布上绘制其形状和轨迹。 以下是一个简单的实现示例: HTML 代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>生日快乐烟花特效</title> <style> canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } </style> </head> <body> <canvas id="fireworks"></canvas> <script src="fireworks.js"></script> </body> </html> ``` JavaScript 代码: ```javascript // 定义烟花类 class Firework { constructor(x, y, color) { this.x = x; this.y = y; this.color = color; this.speed = { x: Math.random() * 8 - 4, y: Math.random() * 8 - 4 }; this.acceleration = { x: -this.speed.x / 40, y: -this.speed.y / 40 }; this.radius = Math.random() * 3 + 2; this.opacity = 1; this.isExploded = false; this.fireworks = []; this.sparkles = []; // 绘制烟花 this.draw = function(ctx) { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); ctx.fillStyle = this.color; ctx.globalAlpha = this.opacity; ctx.fill(); }; // 更新烟花 this.update = function() { this.speed.x += this.acceleration.x; this.speed.y += this.acceleration.y; this.x += this.speed.x; this.y += this.speed.y; this.opacity -= 0.01; if (this.opacity <= 0) { this.isExploded = true; this.explode(); } }; // 爆炸成若干个小火花 this.explode = function() { for (let i = 0; i < 20; i++) { const sparkle = new Sparkle(this.x, this.y, this.color); this.sparkles.push(sparkle); } }; } } // 定义小火花类 class Sparkle { constructor(x, y, color) { this.x = x; this.y = y; this.color = color; this.speed = { x: Math.random() * 5 - 2.5, y: Math.random() * 5 - 2.5 }; this.acceleration = { x: -this.speed.x / 50, y: -this.speed.y / 50 }; this.radius = Math.random() * 2 + 1; this.opacity = 1; // 绘制小火花 this.draw = function(ctx) { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); ctx.fillStyle = this.color; ctx.globalAlpha = this.opacity; ctx.fill(); }; // 更新小火花 this.update = function() { this.speed.x += this.acceleration.x; this.speed.y += this.acceleration.y; this.x += this.speed.x; this.y += this.speed.y; this.opacity -= 0.03; }; } } // 创建画布和绘图上下文 const canvas = document.getElementById('fireworks'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 创建烟花数组 let fireworks = []; // 定义动画函数 function animate() { requestAnimationFrame(animate); ctx.clearRect(0, 0, canvas.width, canvas.height); // 更新并绘制烟花 fireworks.forEach(function(firework, index) { firework.update(); firework.draw(ctx); // 更新并绘制小火花 if (firework.isExploded) { firework.sparkles.forEach(function(sparkle, index) { sparkle.update(); sparkle.draw(ctx); if (sparkle.opacity <= 0) { firework.sparkles.splice(index, 1); } }); } // 移除已经消失的烟花 if (firework.isExploded && firework.sparkles.length === 0) { fireworks.splice(index, 1); } }); } // 监听鼠标点击事件 canvas.addEventListener('click', function(event) { const x = event.clientX; const y = event.clientY; const color = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`; const firework = new Firework(x, y, color); fireworks.push(firework); }); // 启动动画 animate(); ``` 将以上代码保存为 `fireworks.html` 和 `fireworks.js`,在浏览器中打开 `fireworks.html`,点击屏幕即可看到生日快乐烟花特效

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值