JQuery实现点击页面,出现移动渐隐放大的随机图标

大家在浏览其他小伙伴的博客的时候,可能会发现在进行点击的时候会有一些效果,即:点击页面,会在点击的地方随机出现一些文字或者出现一些小的图标,动画状态为向上的移动以及渐隐的放大。

博主也在本博客做了类似的效果,在点击的位置出现随机颜色的小心心,下面博主贴出对应的代码供小伙伴参考!

JQyery代码:

var heart_arr= new Array("1.png", "2.png", "3.png", "4.png", "5.png", "6.png", "7.png");

$('body').delegate('.main_wrap','click',function(){
    var x = getX(event);
    var y = getY(event);//获取坐标值

    var index = Math.floor((Math.random() * heart_arr.length));
    var heart = heart_arr[index];
    
    $('body').append("<img class='append_dom' src='https://www.jqpeng.com/Public/Home/img/heart/"+heart+"' style='position: absolute;z-index:99999999999999999999999999999;'>");//向dom中添加元素
    $('.append_dom').last().css({
        "left":x-8,
        "top":y-8
    }).animate({
        width:"25px",
        height:"25px",
        marginTop:"-100px",
        opacity:'.2'
    },1000,'linear',function() {
        $(this).remove();
    })//设置图标X,Y值,以及规定动画
})

function getX(e) {
    e = e || window.event;
    return e.pageX || e.clientX + document.body.scroolLeft;
}

function getY(e) {
    e = e|| window.event;
    return e.pageY || e.clientY + document.boyd.scrollTop;
}

需要注意的是:本代码中的出现的logo为固定颜色的心形图标,若需要点击出现其他图标或者更换为随机颜色的数字或者文字等效果,可以再使用随机数生成一个RGB32的颜色加入DOM。

以上代码仅仅提供思路,供个人参考,具体使用可依据需求进行修改。

本文由 有花不见叶 原创发布于光阴小栈,未经许可,禁止转载。

共有 0 条评论

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据