jQuery文字“橡皮圈“特效
<!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文字“橡皮圈“特效的更多相关文章
- 18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...
- 基于jQuery图片遮罩滑动文字切换特效
基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
- 分享jquery实现百叶窗特效的图片轮播
首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...
- 14种网页jQuery和css3特效插件代码演示
1.网页table增删样式代码 演示和下载地址 2.jQuery左右滑动幻灯片插件 演示和下载地址 3.jQuery文字轮播焦点图 演示和下载地址 4.网页文字焦点图切换 演示和下载地址 5.jQue ...
- 10款jquery图片广告特效的预览及源码下载 改自[帅的相对论]
原文格式有问题,我来排版了一下,分享给大家. 1.jQuery仿海尔官网全屏焦点图特效代码 Query仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效.当焦点图切换时,下方的三块 ...
- jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery文字上下滚动--单行 批量多行 文字图片上下翻滚 | 多行滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 强大的自适应jQuery焦点图特效
jQuery焦点图切换自适应效果 自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等. 今天我们要来分享一款很灵活的jQuery焦 ...
随机推荐
- leetcode实践：找出两个有序数组的中位数
题目 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n)). 代码实现 package com. ...
- MyBatis 常用写法
MyBatis 常用写法 1.forEach 循环 forEach 元素的属性主要有 item, idnex, collection, open, separator, close. collec ...
- CentOS系统下安装SVN及常用命令
1.SVN的安装: yum install subversion 2.服务端命令 svnserver -- 控制svn系统服务的启动等 svnadmin -- 版本库的创建.导出.导入.删除等 svn ...
- async 配合mysql
async-db.js const mysql = require('mysql') const pool = mysql.createPool({ host : '127.0.0.1', user ...
- Android 退出整个应用程序
我们在写android应用程序时,经常会遇到想退出当前Acitivity,或者直接退出应用程序.我之前的一般操作是按返回键,或者直接按home键直接返回,其实这两种操作都没有关闭当前应用程序,没有释放 ...
- Spring Boot—08Jackson处理JSON
package com.sample.smartmap.controller; import java.io.IOException; import java.math.BigDecimal; imp ...
- Vue项目中引用vue-resource步骤
直接上步骤: 1.通过命令,进入到当前项目所在目录 2.输入以下命令npm install vue-resource --save 3.安装完毕后,在main.js中导入,如下: import Vue ...
- HttpSession implements session
体验 使用HttpSession进行会话管理,完全可以忽略HTTP无状态的事实. HttpSession会话管理原理 使用HttpSession进行会话管理十分方便,让Web应用程序看似可以“记得”浏 ...
- linux centos7最小化安装NAT模式网络设置
1.网络连接设置为NAT模式2.开启CentOS7,以root登陆3.vi /etc/sysconfig/network-scripts/ifcfg-ensXXXX4.设置BOOTPROTO=dhcp ...
- CSS 小结笔记之三种样式表
CSS 引入共有三种方式:内部样式表,内联样式(行内样式)表,外部样式表,当然也可以使用多重样式 内联样式 <div style="color:red;font-size:20px&q ...