琴弦文字 － jquery插件

Posted 2020-08-13 上位者的怜悯

这是一个基于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!