<!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);
