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

jQuery文字“橡皮圈“特效的更多相关文章

  1. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  2. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  3. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  4. 分享jquery实现百叶窗特效的图片轮播

    首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...

  5. 14种网页jQuery和css3特效插件代码演示

    1.网页table增删样式代码 演示和下载地址 2.jQuery左右滑动幻灯片插件 演示和下载地址 3.jQuery文字轮播焦点图 演示和下载地址 4.网页文字焦点图切换 演示和下载地址 5.jQue ...

  6. 10款jquery图片广告特效的预览及源码下载 改自[帅的相对论]

    原文格式有问题,我来排版了一下,分享给大家. 1.jQuery仿海尔官网全屏焦点图特效代码 Query仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效.当焦点图切换时,下方的三块 ...

  7. jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery文字上下滚动--单行 批量多行 文字图片上下翻滚 | 多行滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 强大的自适应jQuery焦点图特效

    jQuery焦点图切换自适应效果 自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等. 今天我们要来分享一款很灵活的jQuery焦 ...

随机推荐

  1. MVC，MVP 和 MVVM 的图示（转）

    作者: 阮一峰 日期: 2015年2月 1日 转自:http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html 复杂的软件必须有清晰合理的架构,否则 ...

  2. Linux : task work 机制

    task work机制可以在内核中向指定的进程添加一些任务函数,这些任务函数会在进程返回用户态时执行,使用的是该进程的上下文.包括下面的这些API: task_work_add task_work_c ...

  3. 给model模型传数组参数

    $res = $this->Company->companyDischarge($this->user_id,array(0=>'c.limit_sum>0',1=> ...

  4. Spring框架学习之概述

    一.什么是软件框架 打个比方就像建筑的混凝土框架,搭好了架子,工人只需要把墙填上. .特点: -半成品 -封装了特定的处理流程和控制逻辑 -成熟的,不断升级改造的软件 .框架和类库的区别 -框架一般是 ...

  5. flutter开发中常用的dart插件

    flutter插件官网地址:https://pub.dartlang.org/packages/ 1. image_picker 一个可以从图库选择图片,并可以用相机拍摄新照片的flutter插件 2 ...

  6. Android ListView几个重要属性

    1.transciptMode属性,需要用ListView或者其它显示大量Items的控件实时跟踪或者查看信息,并且希望最新的条目可以自动滚动到可视范围内.通过设置的控件transcriptMode属 ...

  7. MYSQL 外键 on语句 多表查询

    外键约束 创建外键 --- 每一个班主任会对应多个学生 , 而每个学生只能对应一个班主任 ----主表 CREATE TABLE ClassCharger( id TINYINT PRIMARY KE ...

  8. Angularjs 表格插件的使用

    对于相关的table组件可以使用:UI Grid (ng-grid),ng-table,smart table,Angular-Datatables,tablelite,kendo-ui中的grid. ...

  9. Executors相关的类（线程池）

    一.概述 Java是天生就支持并发的语言,支持并发意味着多线程,线程的频繁创建在高并发及大数据量是非常消耗资源的,因为java提供了线程池.在jdk1.5以前的版本中,线程池的使用是及其简陋的,但是在 ...

  10. sqlserver的资源调控器

    参考SQL Server2014管理最佳实战,所做的笔记. 1:创建资源池 use master go create resource pool poolAdhoc with ( min_cpu_pe ...