我們在很多網站中都看見過鼠標點擊網頁就會出現文字冒泡的效果或是其他圖案
今天我就給你如何實現的方法,首先上代碼:
/* 鼠標點擊特效 */
var span_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var tt = new Array("你好嗎?","我很好!","你快樂嗎?","我很快樂!");
var $span_i = $("<span/>").text(tt[span_idx]);
span_idx = (span_idx + 1) % tt.length;
var x = e.pageX,
y = e.pageY;
$span_i.css({
"z-index": 9999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#ff6651"
});
$("body").append($span_i);
$span_i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$span_i.remove();
});
});
});
首先定義顯示文字數組
var tt = new Array("你好嗎?","我很好!","你快樂嗎?","我很快樂!");
然後添加到<span></span>標籤中
var $i = $("<span/>").text(tt[spaan_idx]);
設置每一次變化的文字,第一爲0,以後爲123,再開始爲0123,
spaan_idx = (spaan_idx + 1) % tt.length;
設置垂直和水平方向的距離,也就是span標籤的定位var x = e.pageX,y = e.pageY;
給每一個sapn標籤的設置css樣式,讓他們絕對定位顯示在body內所有內容之上,初顯位置y軸上向上偏移20,x軸不變
$span_i.css({ "z-index": 9999999, "top": y - 20,"left": x, "position": "absolute", "font-weight": "bold","color": "#ff6651" });
把每一個span標籤添加到body中顯示
$("body").append($span_i);
使用animate() 方法執行 CSS 屬性集的自定義動畫。
語法 1
$(selector).animate(styles,speed,easing,callback)
| 參數 | 描述 |
|---|---|
| styles |
必需。規定產生動畫效果的 CSS 樣式和值。 可能的 CSS 樣式值（提供實例）：
註釋：CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設置，而非 CSS 名稱（比如 "font-size"）。 |
| speed |
可選。規定動畫的速度。默認是 "normal"。 可能的值：
|
| easing |
可選。規定在不同的動畫點中設置動畫速度的 easing 函數。 內置的 easing 函數：
擴展插件中提供更多 easing 函數。 |
| callback |
可選。animate 函數執行完之後，要執行的函數。 如需學習更多有關 callback 的內容，請訪問我們的 jQuery Callback 這一章。 |
語法 2
$(selector).animate(styles,options)
| 參數 | 描述 |
|---|---|
| styles | 必需。規定產生動畫效果的 CSS 樣式和值（同上）。 |
| options |
可選。規定動畫的額外選項。 可能的值：
|
該方法通過CSS樣式將元素從一個狀態改變爲另一個狀態。CSS屬性值是逐漸改變的，這樣就可以創建動畫效果。
給每一個顯示的span加上動畫,速度y軸方向偏移180,1.5秒後消失透明度爲0
$span_i.animate({"top": y - 180,"opacity": 0},1500,function() {$span_i.remove();});
下面附帶其他圖案效果:
//鼠標點擊出現愛心特效
(function (window, document, undefined) {
var hearts = [];
window.requestAnimationFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
setTimeout(callback, 1000 / 60);
}
})();
init();
function init() {
css(
".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
);
attachEvent();
gameloop();
}
function gameloop() {
for (var i = 0; i < hearts.length; i++) {
if (hearts[i].alpha <= 0) {
document.body.removeChild(hearts[i].el);
hearts.splice(i, 1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i]
.alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale +
") rotate(45deg);background:" + hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent() {
var old = typeof window.οnclick === "function" && window.onclick;
window.onclick = function (event) {
old && old();
createHeart(event);
}
}
function createHeart(event) {
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el: d,
x: event.clientX - 5,
y: event.clientY - 5,
scale: 1,
alpha: 1,
color: randomColor()
});
document.body.appendChild(d);
}
function css(css) {
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode(css));
} catch (ex) {
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor() {
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) +
")";
}
})(window, document);