琴弦文字 － 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

 

並不是很復雜的東西，講一下我的思路。

---

效果：

1. 鼠標進入容器，能夠拖動文字。
2. 被拖動的文字會帶動附近的文字，有一個遞減的拖動距離，越遠被帶動的越少。
3. 拖到一定程度，文字就會彈回去，有一個晃動的效果。

---

思路：

1. 容器內的文字，拆分成一個個span。用mousemove來監聽鼠標。
2. 鼠標在容器內移動多少距離(以mouseenter來確定初始位置)，文字也朝同樣的方向，移動同樣的距離。附近的文字距離遞減，最低移動0。
3. 設置一個最大的移動距離，當鼠標移動距離超出這個最大值，開始回彈效果。彈動效果用緩動函數來做。

---

 

Enjoy it!