Fork me on GitHub

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

 

posted on   上位者的怜悯  阅读(4722)  评论(56编辑  收藏  举报

编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示
咦你想做什么 oAo
menu