我们在很多网站中都看见过鼠标点击网页就会出现文字冒泡的效果或是其他图案
今天我就给你如何实现的方法,首先上代码:
/* 鼠标点击特效 */
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);