头像

jQuery+css3简单漂亮的鼠标悬停按钮动画特效

来源:http://www.sucaihuo.com/js/3789 素材火管理员 2018-07-05 11:30浏览(149) 收藏

jQuery+css3制作一款简单漂亮的鼠标悬停按钮动画特效,可以感知鼠标方向,动画效果从鼠标进入方向出现。
jQuery+css3简单漂亮的鼠标悬停按钮动画特效
分类:html/css > 按钮 难易:初级

程序员,你不是一个人;网站开发QQ群:436471830,在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 3 下载资源 下载积分: 10 积分

js代码

<script>
$( ".button_su_inner" ).mouseenter(function(e) {
   var parentOffset = $(this).offset(); 
  
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;
   $(this).prev(".su_button_circle").css({"left": relX, "top": relY });
   $(this).prev(".su_button_circle").removeClass("desplode-circle");
   $(this).prev(".su_button_circle").addClass("explode-circle");

});

$( ".button_su_inner" ).mouseleave(function(e) {

     var parentOffset = $(this).offset(); 

     var relX = e.pageX - parentOffset.left;
     var relY = e.pageY - parentOffset.top;
     $(this).prev(".su_button_circle").css({"left": relX, "top": relY });
     $(this).prev(".su_button_circle").removeClass("explode-circle");
     $(this).prev(".su_button_circle").addClass("desplode-circle");

});</script>
评论6
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 5楼
    07-10 08:33
    涂***乐
    谢谢分享素材,这次能用到
  • 头像 4楼
    07-06 18:53
    u_***00
    不错的效果,谢谢分享!
  • 头像 3楼
    07-06 09:18
    心***扬
    效果超棒,感谢楼主分享……
  • 头像 板凳
    07-05 19:17
    木***偶
    还分方向的,很漂亮,炫酷的
  • 头像 椅子
    07-05 17:19
    .***主
    效果不错, 不过我想在手机端写类似的
  • 头像 沙发
    07-05 13:55
    u *** ゜
    效果可以,值得学习。
1 2