有很多的個(gè)人博客， 為了顯示一些個(gè)性， 就當(dāng)在頁面上做了一些特效，當(dāng) 隨機(jī)點(diǎn)擊頁面時(shí)就在鼠標(biāo)點(diǎn)擊處隨機(jī)顯示一些信息的， 酷酷的，挺有意思，那么是怎么做的呢，這里給出一個(gè)效果實(shí)例分享與大家
/* 鼠標(biāo)特效 */
$(function(){
$(window).click(function (e) {
//名菜菜名
var dishes = [
"豆瓣鯽魚","干燒鯽魚","糖醋鯉魚","紅燜鮑魚","紅燒鱔段","花籃桂魚","煎燒帶魚","茄汁鏈魚",
"鳳尾大蝦","油燜大蝦","玉蘭蝦菜","核桃蝦仁","龍井蝦仁","芙蓉螺肉","釀蟹鉗","紅燒梭子蟹",
"清蒸螃蟹","西湖蝦仁","粟子燜蛤蜊","紅燒魷魚","草菇煸雞","香酥雞","脫骨扒雞","怪味雞",
"炒鴨片","神仙鴨","蔥爆鴨片","扒兔肉","紅燒乳鴿"
];
//隨機(jī)顯示顏色
var colors = [
"#FFF68F", "#FFBBFF", "#FF0000", "#FF00FF", "#F08080",
"#008000", "#7FFFAA", "#0000CD", "#0000FF", "#080808"
];
var dishesN = Math.floor((Math.random() * dishes.length)); //生成0-dishes.length之間的整數(shù)
var colorN = Math.floor((Math.random() * colors.length)); //生成0-colors.length之間的整數(shù)
var color = colors[colorN]; //得到當(dāng)前的顏色
var spans = $("<span/>").text(dishes[dishesN]); //臨時(shí)動(dòng)態(tài)創(chuàng)建一個(gè)span標(biāo)簽并設(shè)置菜的內(nèi)容, 返回一個(gè)jquery對象
//得到當(dāng)前鼠標(biāo)的位置
var x = e.pageX,
y = e.pageY;
//設(shè)置標(biāo)簽的樣式
spans.css({
"z-index": 99,
"top": (y - 20) + "px", //當(dāng)前鼠標(biāo)點(diǎn)擊的上方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中
//設(shè)置spans動(dòng)畫， 1.5秒向上移動(dòng)300px, 并透明度設(shè)置為0(透明， 不可見), 然后再移除此元素
spans.animate({
"top": (y - 300) + "px",
"opacity": 0 //設(shè)置透明度
}, 1500, function () {
spans.remove(); //從body中刪除
});
});
})
