jquery实现按钮翻转动画
浏览数：29 /
时间：2015年06月09日
HTML Code：
<div id="login_btn"> <button onclick="login()"><img src="../../App_Themes/page/images/login_btn.png" alt="登录" title="登录" /></button> </div>
步骤：
1.在div内部前面插入一个span，并设置span背景及大小；
2.再通过span向上滑动，露出底下的button的背景。
CSS Code：
#login_btn { margin-left:78px; margin-top:10px; background:url("./images/login_btn.png") left bottom no-repeat; width:184px; height:39px; overflow:hidden;} #login_btn button {border:none; background:url("./images/login_btn.png") left top; cursor:pointer;} #login_btn span {display:block; width:100%; height:100%; cursor:pointer;}
JS Code：
// 登录按钮特效 function Login_btn() { $(‘#login_btn‘).prepend(‘<span></span>‘); $(‘#login_btn‘).hover(function() { $(this).find(‘span‘).stop().animate({marginTop:"-39px"},250); },function() { $(this).find(‘span‘).stop().animate({marginTop:"0"},250); }) }
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
