有很多的个人博客， 为了显示一些个性， 就当在页面上做了一些特效，当 随机点击页面时就在鼠标点击处随机显示一些信息的， 酷酷的，挺有意思，那么是怎么做的呢，这里给出一个效果实例分享与大家
/* 鼠标特效 */
$(function(){
$(window).click(function (e) {
//名菜菜名
var dishes = [
"豆瓣鲫鱼","干烧鲫鱼","糖醋鲤鱼","红焖鲍鱼","红烧鳝段","花篮桂鱼","煎烧带鱼","茄汁链鱼",
"凤尾大虾","油焖大虾","玉兰虾菜","核桃虾仁","龙井虾仁","芙蓉螺肉","酿蟹钳","红烧梭子蟹",
"清蒸螃蟹","西湖虾仁","粟子焖蛤蜊","红烧鱿鱼","草菇煸鸡","香酥鸡","脱骨扒鸡","怪味鸡",
"炒鸭片","神仙鸭","葱爆鸭片","扒兔肉","红烧乳鸽"
];
//随机显示颜色
var colors = [
"#FFF68F", "#FFBBFF", "#FF0000", "#FF00FF", "#F08080",
"#008000", "#7FFFAA", "#0000CD", "#0000FF", "#080808"
];
var dishesN = Math.floor((Math.random() * dishes.length)); //生成0-dishes.length之间的整数
var colorN = Math.floor((Math.random() * colors.length)); //生成0-colors.length之间的整数
var color = colors[colorN]; //得到当前的颜色
var spans = $("<span/>").text(dishes[dishesN]); //临时动态创建一个span标签并设置菜的内容, 返回一个jquery对象
//得到当前鼠标的位置
var x = e.pageX,
y = e.pageY;
//设置标签的样式
spans.css({
"z-index": 99,
"top": (y - 20) + "px", //当前鼠标点击的上方20px
"left": x + "px",
"position": "absolute",
"font-weight": "bold",
"font-size" : "30px",
"border" : "1px dashed skyblue",
"padding" : "3px",
"color": color,
});
$("body").append(spans); //将spans添加到body中
//设置spans动画， 1.5秒向上移动300px, 并透明度设置为0(透明， 不可见), 然后再移除此元素
spans.animate({
"top": (y - 300) + "px",
"opacity": 0 //设置透明度
}, 1500, function () {
spans.remove(); //从body中删除
});
});
})
