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