琴弦文字 － jquery插件

原文: 琴弦文字 － jquery插件

這是一個基于jquery的琴弦效果插件。

以前曾經見過這個效果，有過嘗試的想法但是當時技能點還不夠。 前天在火車上偶然想起這個，認真思索了一下，一氣呵成 :D

看來最近技能樹點偏的不太遠。

效果展示 用你的滑鼠，劃過下面的文字

琴弦文字琴弦文字琴弦文字琴弦文字琴弦文字琴弦文字琴弦文字琴弦文字琴弦文字

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!