首页 > 特效插件 > 文字特效 >  鼠标划过一行文字“拉动”文字如琴弦的效果正文

鼠标划过一行文字“拉动”文字如琴弦的效果

特效介绍
jQuery实现,类似于妙味课堂首页的链接,鼠标滑过链接,文字会被“拉动”并回弹,类似于手指拨动琴弦的效果,非常炫酷,下面是效果图:



运行下面的代码进行测试:


提示:您可以先修改部分代码再运行


使用方法
1、引入jQuery和qin.js
<script src="http://www.5imoban.net/download/jquery/jquery-1.9.1.min.js"></script>
<script src="http://www.5imoban.net/download/js/qin.js"></script>
2、将您要实现的文字包裹起来,同时给包裹文字的当前dom加相对定位或者绝对定位,由于使用了此效果,文字会被切割成一个一个绝对定位的元素,所以父元素会失去高度,此时要定义父元素的高度:
<style>
a{
    display: block;
    /*要相对定位或绝对定位*/
    position: relative;
    margin-top:20px;
    text-decoration: none;
    color: #666;
    /*要给高度*/
    height: 16px;
    line-height: 16px;
}
</style>
<div style="width:500px; padding-top:100px; margin: auto;">
    <a href="http://www.5imoban.net/jiaocheng/jquery/202012014536.html">blob流导出文件以及对应格式</a>
    <a href="http://www.5imoban.net/jiaocheng/jquery/202011184449.html">js中,双问号??和双竖杠||的简单比较区别</a>
    <a href="http://www.5imoban.net/jiaocheng/jquery/201706162319.html">用js实现网页上模仿桌面右键菜单_导航菜单</a>
</div>
3、调用插件:
$("a").qin({
    offset:22, // default , 最大偏移量
    duration:500, // default , 晃动时间
    recline:0.1 // default , 每像素偏移量,越小“琴弦绷的越紧”
});