琴弦文字 - jquery插件

简介: 原文:琴弦文字 - jquery插件 这是一个基于jquery的琴弦效果插件。 以前曾经见过这个效果,有过尝试的想法但是当时技能点还不够。 前天在火车上偶然想起这个,认真思索了一下,一气呵成 :D 看来最近技能树点偏的不太远。
原文: 琴弦文字 - 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

 

使用方式:

1         $(selector).qin({
2             offset:22, // default , 最大偏移量
3             duration:500, // default , 晃动时间
4             recline:0.1 // default , 每像素偏移量,越小“琴弦绷的越紧”
5         });

容器需要给一个定位,如:relative,absolute

 

并不是很复杂的东西,讲一下我的思路。


效果:

  1. 鼠标进入容器,能够拖动文字。
  2. 被拖动的文字会带动附近的文字,有一个递减的拖动距离,越远被带动的越少。
  3. 拖到一定程度,文字就会弹回去,有一个晃动的效果。

思路:

  1. 容器内的文字,拆分成一个个span。用mousemove来监听鼠标。
  2. 鼠标在容器内移动多少距离(以mouseenter来确定初始位置),文字也朝同样的方向,移动同样的距离。附近的文字距离递减,最低移动0。
  3. 设置一个最大的移动距离,当鼠标移动距离超出这个最大值,开始回弹效果。弹动效果用缓动函数来做。

 

Enjoy it!

 

目录
相关文章
|
6月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
36 0
|
3月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
3月前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
19 0
|
3月前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
25 0
|
4月前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
54 1
|
5月前
|
JavaScript
jQuery年月日(年龄)选择插件
jQuery年月日(年龄)选择插件
28 0
|
5月前
|
前端开发 JavaScript
Jquery前端分页插件pagination同步加载和异步加载
Jquery前端分页插件pagination同步加载和异步加载
43 0
|
5月前
|
JavaScript 前端开发 数据格式
Jquery前端分页插件pagination使用
Jquery前端分页插件pagination使用
58 1
|
5月前
|
移动开发 JavaScript 前端开发
jQuery实现多种切换效果的图片切换的五款插件
jQuery实现多种切换效果的图片切换的五款插件
37 0
|
5月前
|
移动开发 JSON JavaScript
七个帮助你处理Web页面层布局的jQuery插件
七个帮助你处理Web页面层布局的jQuery插件
42 0