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