Js实现页面特效（按钮点击特效，飘雪花）

最新推荐文章于 2023-07-17 14:36:38 发布

superSubfn

最新推荐文章于 2023-07-17 14:36:38 发布

阅读量2.1k

点赞数 2

分类专栏：前端文章标签： js特效雪花爱心鼠标点击

本文链接：https://blog.csdn.net/superSubfn/article/details/103927298

版权

本文介绍了如何利用JavaScript实现页面上的交互特效，包括按钮点击时的动态效果和模拟飘落的雪花特效，同时提及了添加爱心等其他视觉互动的可能性。

摘要由CSDN通过智能技术生成

/*单击出现社会主义核心价值观特效*/
$(document).ready(function(){
    var a_index = 0;
    $("body").click(function(e){
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_index]);
        a_index = (a_index + 1) % a.length;
        var x = e.pageX,y = e.pageY;
        $i.css({
            "z-index": 99999,
            "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();
        });
    });
});

/*单击出现爱心特效*/
(funct