jQuery图片边框线条动画效果

所属分类:UI-悬停

 38469  434  查看评论 (8)
分享到微信朋友圈
X
jQuery图片边框线条动画效果 ie兼容6

效果描述:

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

类似两条河流交汇的效果


原理

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

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

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

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


使用方法:

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

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

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


相关插件-悬停

c的鼠标滑过图片遮罩层动画jQuery插件

nsHover是一款简单实用的鼠标滑过图片遮罩层动画jQuery插件。该插件可以在图片或块级元素上制作鼠标滑过时的遮罩层动画效果,它可以设置遮罩层的前景色和背景色,可以制作圆形图片等,非常实用。
  悬停
 33419  382

悬停显示图片

超炫酷鼠标悬停显示图片
  悬停
 25929  378

js鼠标滑过方向感效果

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

jquery hover鼠标滑过图片半透明文字标题滑动显示隐藏

jquery hover鼠标滑过图片半透明文字标题滑动显示隐藏
  悬停
 44552  370

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ----- 0
    2017/8/16 23:02:11

    原理蛮简单的啊,不用下,自己尝试

        若兮相言0
        2018/3/16 14:46:03
        能提箱一下死用什么原理实现吗

        若兮相言0
        2018/3/16 14:50:50
        打错字了 跪求一份913611134@qq.com
    回复
    龙先生、? 0
    2017/6/15 13:30:04

    确实很不错  只是需要jq币 没办法下载

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

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


        Dreamet0
        2016/3/27 23:03:00
        我要jq币,新手,有办法帮忙吗
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复