这个特效笔者还真找不出什么特别贴切的标题来描述，直接看看效果图吧。哦对了，这个特效的灵感是笔者自己浏览一些网页的时候，鼠标点击，就会弹出或是文字或是图片，觉得新鲜就做了一个小的demo，还需完善，仅供参考。
由于笔者采用span标签来包裹弹出的字，所有给它个绝对定位，不让用户选中（如果不这样，鼠标移到字上就会变形，难看）,设置个字体大小。
JS部分，由于是用jQuery实现的，故要引入jQuery，网上太多教程了这里不多说。
var fontAll = [ '辛德拉', '劫', '卡萨丁', '崔斯特', '格雷福斯', '安妮', '阿木木', '卡兹克', '纳尔', '德莱厄斯', '德莱文', '卡尔玛', ]; var colorAll = [ 'red', 'pink', 'yellow', 'blue', 'aqua', 'green', 'gold', 'brown', 'grey', 'orange', ];首先，你要定义两个数组，一个为弹出字体的内容，一个为弹出字体的颜色。定义两个数组是为了之后可以利用Math.random()随机选取颜色和内容。注意，弹出的字体不要太长，而且不要加与你网页背景色太过相近的颜色，显得很憨批。
$(document).click(function (e) { var $span = $('<span>' + fontAll[Math.floor(Math.random() * fontAll.length)] + '</span>'); $('body').append($span); $span.css('color', colorAll[Math.floor(Math.random() * colorAll.length)]) var width = $span.width() var height = $span.height() var init = e.pageY - height / 2; $span.css({ left: e.pageX - width / 2 + 'px', top: init + 'px' }); $span.animate({ fontsize: 10 + 'px', top: init - 150 + 'px', opacity: .2 }, 1000, function () { $span.css('display', 'none'); }) });接下来就是重点了。先给document注册个点击事件，然后像上述格式一样定义一个jQuery对象并添加到body里面，再接着随机颜色。e.pageX,e.pageY为鼠标点击时，点击处距离窗口边框的x轴距离和y轴距离，可以通过定位的方式来把这个对象定位到鼠标处。这里要注意，这样生成的文字是以鼠标左上角为（0，0）的，有点像鼠标拖着文字呢，不好看。所以减去文字自身的宽高的一半，可以实现居中于鼠标的效果，animate()方法是jQuery中自定义动画用的，这里抄一下文档：
animate(params,[speed],[easing],[fn]) params,[speed],[easing],[fn]Options,Number/String,String,Function params:一组包含作为动画属性和终值的样式属性和及其值的集合 speed:三种预定速度之一的字("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和"swing". fn:在动画完成时执行的函数，每个元素执行一次。因为要让文字有飞出去的效果，所以要记录文字生成的时候的初始位置，然后再根据它修改top值，-100或者-200px都可以，这里所有的东西都是可以自己调整的，自己觉得好看即可。
简单的一个特效，本例是文字，大家可以根据同样的思路弹出图片或者等等。觉得不错的点个赞吧~！
