琴弦文字 - 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 ...
随机推荐
- 深入浅出node(1) Node简介
这一系列主要是自己在学习深入浅出node.js这本书的学习笔试,部分加入了自己的一些理解 分享给一起学习node的小伙伴 自己还是个初学者 有很多地方理解的不到位 一起交流 一 什么是node 1.1 ...
- [deviceone开发]-小草用户分享的Listview停靠的示例
一.简介 这个例子展示了Listview的多模板,上拉下拉功能,也实现了上下滑动第二行工具栏的停靠功能,值得参考 二.效果图 三.相关下载 https://github.com/do-project/ ...
- 转一篇简洁的UIView动画编程方法
iOS 中的 UIView 动画编程其实还是很简单的,像 CSS3 一样,在给定的时间内完成状态连续性的变化呈现.比如背景色,Frame 大小,位移.翻转,特明度等. 以前我使用的编程方式都是用下面 ...
- iOS百度地图SDK集成详细步骤
1.iOS百度地图下载地址 http://developer.baidu.com/map/index.php?title=iossdk/sdkiosdev-download 根据需要选择不同的版本 ...
- 基于ntp的多服务器时间同步脚本
server服务器每1个小时更新一次时间,server服务器旗下同步服务器每5秒钟同步一次时间,同步服务器与外网不做交互,由server服务器进行同步时间.所以保证每一台同步服务器时间一致. #vi ...
- JS实现HTML标签转义及反转义
今天我用ueditor时候遇到一个问题: 我从数据库中读取内容进行编辑的时候,不是有一些html标签嘛,从数据库读出来没有问题: 但是我用asp.net mvc,把读取出来的内容通过ueditor的a ...
- ORACLE使用GV_$TEMP_SPACE_HEADER统计临时表空使用情况不准确的问题
以前写了一篇ORACLE临时表空间总结的文章, 里面介绍了几个查看临时表空间使用情况的脚本,其中一个脚本如下所示: SELECT TU.TABLESPACE_NAME ...
- hbase伪分布式平台搭建(centos 6.3)
搭建完<hadoop伪分布式平台>后就开始搭建hbase伪分布式平台了.有了hadoop环境,搭建hbase就变得很容易了. 一.Hbase安装 1.从官网下载最新版本Hbase安装包1. ...
- Object.observe将不加入到ES7
先请看 Object.observe 的 API Object.observe(obj, callback[, acceptList]) 它用来监听对象的变化,当给该对象添加属性,修改属性时都会被依次 ...
- hadoop2.2.0伪分布式搭建3--安装Hadoop
3.1上传hadoop安装包 3.2解压hadoop安装包 mkdir /cloud #解压到/cloud/目录下 tar -zxvf hadoop-2.2.0.tar.gz -C /cloud/ 3 ...