jQuery图片边框线条动画效果

所属分类:UI-悬停

 7272  79  查看评论 (3)
jQuery图片边框线条动画效果 ie兼容6

效果描述:

本案例的主要效果是鼠标悬停在图片上,从其中的两个角分别延伸出两条线

类似两条河流交汇的效果


原理

建立四个div,与图片同等级,用绝对定位的方法定位到图片了两个对角

给一个默认的颜色,默认高度为0

当鼠标悬停在图片上后,出发jQuery的animate属性,分别改变四个div的宽度或者高度

这个时候将产生四条线的延伸动画效果


使用方法:

1、将css样式引入到你的网页中

2、将body中的代码部分拷贝到你需要的地方即可

(js、图片采用绝对路径,不建议修改路径)


相关插件-悬停

js鼠标滑过方向感效果

js鼠标滑过方向感知三维立方体动画
  悬停
 3632  64

纯CSS3鼠标滑过图片效果动画库imagehover.css

imagehover.css-纯CSS3鼠标滑过图片效果动画库,44种鼠标滑过效果
  悬停
 11066  118

3D鼠标滑动效果

hover3d.js-超酷鼠标滑过图片3D卡片效果jQuery插件
  悬停
 6494  85

横向跟随图片文字特效

横向跟随图片动画代码(jQuery)
  悬停
 5980  84

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币

    Dreamet 0
    2016/3/27 23:03:24
    很好,怎么获取呢 回复
    lilizzz 0
    2016/1/16 9:01:59

    用伪类选择器更直接,不用写多余元素


        Dreamet0
        2016/3/27 23:03:00
        我要jq币,新手,有办法帮忙吗
    回复
取消回复