琴弦文字 - jquery插件
这是一个基于jquery的琴弦效果插件。
以前曾经见过这个效果,有过尝试的想法但是当时技能点还不够。 前天在火车上偶然想起这个,认真思索了一下,一气呵成 :D
看来最近技能树点偏的不太远。
效果展示 用你的鼠标,划过下面的文字
琴弦文字琴弦文字琴弦文字琴弦文字琴弦文字琴弦文字琴弦文字琴弦文字琴弦文字
The string words.The string words.The string words.The string words.
琴弦文字琴弦文字琴弦文字琴弦文字琴弦文字琴弦文字琴弦文字琴弦文字琴弦文字
The string words.The string words.The string words.The string words.
琴弦文字琴弦文字琴弦文字琴弦文字琴弦文字琴弦文字琴弦文字琴弦文字琴弦文字
The string words.The string words.The string words.The string words.
特地做了ie6的兼容,,,也不知道是否可用,再附图一张:
代码放在github上,欢迎star...... https://github.com/shalldie/qin
使用方式:
$(selector).qin({
offset:22, // default , 最大偏移量
duration:500, // default , 晃动时间
recline:0.1 // default , 每像素偏移量,越小“琴弦绷的越紧”
});
容器需要给一个定位,如:relative,absolute
并不是很复杂的东西,讲一下我的思路。
效果:
- 鼠标进入容器,能够拖动文字。
- 被拖动的文字会带动附近的文字,有一个递减的拖动距离,越远被带动的越少。
- 拖到一定程度,文字就会弹回去,有一个晃动的效果。
思路:
- 容器内的文字,拆分成一个个span。用mousemove来监听鼠标。
- 鼠标在容器内移动多少距离(以mouseenter来确定初始位置),文字也朝同样的方向,移动同样的距离。附近的文字距离递减,最低移动0。
- 设置一个最大的移动距离,当鼠标移动距离超出这个最大值,开始回弹效果。弹动效果用缓动函数来做。
Enjoy it!
琴弦文字 - jquery插件的更多相关文章
- jQuery插件之jquery editable plugin--点击编辑文字插件
jeditable是一个jquery插件,它的优点是可以就地编辑,并且提交到服务器处理,是一个不可多得的就地编辑插件.(注: 就地编辑,也有称即时编辑?一般的流程是这样的,当用户点击网页上的文字时,该 ...
- jQuery插件综合应用(二)文字为主的页面
一.介绍 文字内容是每个网站都有的内容,网站在展示文字内容时,总是比图片.视频等富媒体内容要难一些,因为富媒体容易被用户接受.尤其是越多的文字内容越难以被用户通篇的阅读,跳跃式阅读往往是阅读的主要方式 ...
- 图片文字滚动插件jQuery Scrollbox
图片文字滚动插件jQuery Scrollbox附件中提供了五种图片.文字滚动样式,只需调用jquery库和jQuery Scrollbox插件,然后再加一段简单的jquery代码即可使用,兼容性良好 ...
- 一个文字无缝滚动的jQuery插件
直接上代码吧 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
- 让人心动的jQuery插件和HTML5动画
1.jQuery/CSS3带表单的下拉菜单 今天要分享一款基于jQuery和CSS3的下拉菜单,这款jQuery下拉菜单非常特别,我们直接可以在下拉菜单中填写联系表单.登录表单.而且整个下拉菜单的外观 ...
- 教你开发jQuery插件(转)
教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...
- jQuery插件编写及链式编程模型小结
JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...
- 推荐15款创建漂亮幻灯片的 jQuery 插件
对于设计师,开发者,摄影师或任何创造性的个人和企业,他们自己的网站是展示他们的技能和服务的最佳场所.你可能打算设计一个新的个人作品网站,不管你是从头开始或使用模板,都会需要使用 jQuery 幻灯片插 ...
- 推荐一个内容滚动jquery插件
myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...
随机推荐
- JS高程3.基本概念(5)语句
1.if语句 2.do-while语句:后测循环语句,循环体内的代码至少执行一次. 3.while语句:前测循环语句. 4.for语句:前测循环语句. 注意:在ECMAScript中不存在块级作用域, ...
- 初识HTML
前面的话 HTML文档的后缀一般都是.html,但是在以前,.htm后缀也是不少的,它们都代表html文档,实际上也没有本质的区别.htm是在win32时代,系统只能识别3位扩展名时使用的.现在一般都 ...
- 火狐浏览器如何js关闭窗口的几种解决方法
今天在项目上有一个页面要求在几秒后自动关闭,想着还比较简单,用window.close()就可以了,但是用IE/谷歌/火狐浏览器试了一下,发现IE可以,谷歌用网上的兼容方法也可以实现,但是火狐这里卡住 ...
- windows下React-native 环境搭建
公司决定试水react-native,mac审批还没下来,没办法,先用windows硬着头皮上吧. 参考文章: React Native 中文网官方文档 史上最全Windows版本搭建安装React ...
- UItableView与UICollectionView
UITableView 1. UITableViewStyleGrouped 分区表格样式创建表格 .separatorStyle = UITableViewCellSeparatorStyleSin ...
- iOS Swift-控制流(The Swift Programming Language)
iOS Swift-控制流(The Swift Programming Language) for-in 在Swift中for循环我们可以省略传统oc笨拙的条件和循环变量的括号,但是语句体的大括号使我 ...
- SQL Server Integration Services(SSIS) 包配置与部署
SSIS配置此处的配置方式,主要针对到正式服务器上要修改服务器名,和连接服务器等配置注意:1. 包配置在windows2008上生成后,在windows2003上mysql的配置无法使用,总是报错连接 ...
- 运行时报错:java.net.BindException: Address already in use: JVM_Bind <null>:8080 (或8009或8005)
修改Tomcat端口号步骤:1.找到Tomcat目录下的conf文件夹2.进入conf文件夹里面找到server.xml文件3.打开server.xml文件(打开方式选择记事本)4.在server.x ...
- 基于ambari2.4.0进行二次开发
目录 线上修改 源码结构 技术点 编译环境的搭建 安装samba 安装编译环境 整体编译 ambari-web的编译 WEB内容修改 wiki:https://cwiki.apache.org/co ...
- 交叉编译总结 libosscore.a libcurl.a libmysqlclient.a
把工程文件交叉编译到arm上运行,着实花费了一番功夫. 首先遇到的错误是 X uses VFP register arguments, B does not 百度了一下,发现是硬浮点和软浮点的问题,原 ...