<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#eraser{
position: relative;
font-size: 12px;
margin-top: 100px;
display: block;
}
</style>
</head>
<body>
<a href="#" id="eraser">划过我触发橡皮圈特效划过我触发橡皮圈特效</a>
<script src="../jquery.min.js"></script>
<script src="jquery.easing.js"></script>
<script src="eraser.js"></script>
<script>
$("#eraser").eraser();
</script>
</body>
</html>
(function($){
$.fn.eraser = function(options){
return this.each(function(){
//----------------分割--------------------//
var ele = $(this);
for(var i=0; i<ele.length; i++){
var splitHtml = ele.eq(i).html().split(""); //截取当前的数量，保存在容器里。
for(var j=0; j<splitHtml.length; j++){
splitHtml[j] = "<span>" + splitHtml[j] + "</span>";
}
ele.eq(i).html(splitHtml.join("")); //把数组中的所有元素放入一个字符串
}
var eleSpan = ele.find("span");
for(var i=0; i<eleSpan.length; i++){ //设置每一个的left值
eleSpan.eq(i).css({
"left" : eleSpan.eq(i).position().left
});
}
eleSpan.css({ //设置绝对定位
"position" : "absolute"
});
//----------------分割--------------------//
var iStartTop = eleSpan.position().top;
var iMinTop = -18;
var iMaxTop = 18;
var obj = null;
eleSpan.on("mouseenter",rubber); //开启
function rubber(ev) {
$(this).parent().mouseout(null); //清除事件
$(this).parent().mousemove(null); //清除事件
var ev = ev || event;
var iStartY = ev.clientY; //获取光标y轴
obj = $(this);
this.parentNode.onmousemove = function(ev) {
$(this).find("span").off("mouseenter", rubber);
$(this).find("span").on("mouseenter", currently);
var iMouseY = ev.clientY;
var iTop = iStartTop + (iMouseY - iStartY);
var aSpan = $(this).find("span");
var iIndex = obj.index();
aSpan.stop();
if(iTop < iMinTop || iTop > iMaxTop) {
aSpan.animate({ //清除 0
top: iStartTop
}, 500, "easeOutElastic");
$(this).find("span").on("mouseenter", rubber);
$(this).find("span").off("mouseenter", currently);
this.onmouseleave = null;
this.onmousemove = null
} else {
for(var i = 0; i < aSpan.length; i++) {
if(iMouseY > iStartY) {
var iSpanTop = iTop - Math.abs(i - iIndex);
if(iSpanTop < iStartTop) {
iSpanTop = iStartTop
}
} else {
if(iMouseY < iStartY) {
var iSpanTop = iTop + Math.abs(i - iIndex);
if(iSpanTop > iStartTop) {
iSpanTop = iStartTop
}
}
}
aSpan.eq(i).css({
"top": iSpanTop + "px"
});
}
}
this.onmouseleave = function(){ //鼠标移除事件
aSpan.animate({
"top" : iStartTop
}, 500, "easeOutElastic");
$(this).find("span").on("mouseenter", rubber);
$(this).find("span").off("mouseenter", currently); //关闭
$(this).mouseleave(null);
$(this).mousemove(null);
}
}
}
function currently() {
obj = $(this);
}
});
}
})(jQuery);