heysakura

简单的不能再简单的鼠标点击特效!

// 定义初始索引值
idx = 0;
$(function($) {
  $("body").click(function(e){

    // 建立一个数组,等待遍历
    a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");

    // 定义一个jquery对象并添加数组元素
    $i = $("<span></span>").text(a[idx]);
    idx = (idx+1) % a.length;

    // 获取鼠标的坐标
    x = e.pageX;
    y = e.pageY;

    // 定义样式
    $i.css({
        "z-index": 99999,
        "top": (y-20)+\'px\',      // 增加px单位
        "left": x +\'px\',      // 增加px单位
        "position": "absolute",
        "font-weight": "bold",
        "color": "rgb("+Math.floor(256*Math.random())+","
                   +Math.floor(256*Math.random())+","
                   +Math.floor(256*Math.random())+")"
    });

    // 添加到body中
    $("body").append($i);

    // 定义自定义动画
    $i.animate({
      "top": y-180+\'px\', // 增加px单位
      "opacity": 0
    },1500,function(){
        // 动画结束该DOM对象消失
        $(this).remove();       // 将$i改为了$(this),修复了存在的bug
       });
    });
});
</script>

 

分类:

技术点:

相关文章: