简单实用的注册和登录特效代码,点击按钮可以在注册和登录之间进行切换,背景颜色也会随之改变,输入框和按钮的颜色也跟着背景变化。
本例样式调用了bootstrap,需要在头部引入,另外,还要引入jquery库和jquery-ui:
<link type="text/css" rel="stylesheet" href="css/bootstrap-3.3.4.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.0.js"></script>
body部分结构不复杂,设置好div容器就好,代码如下:
<div class="body">
<div class="veen">
<div class="login-btn splits">
<p>已经有帐号啦,亲?</p>
<button>用户登录</button>
</div>
<div class="rgstr-btn splits">
<p>还没有帐号吧,亲?</p>
<button>免费注册</button>
</div>
<div class="wrapper">
<div id="login">
<h3>用户登录</h3>
<div class="mail">
<input type="mail" name="">
<label>邮箱或用户名</label>
</div>
<div class="passwd">
<input type="password" name="">
<label>密码</label>
</div>
<div class="submit">
<button class="dark">立即登录</button>
</div>
</div>
<div id="register">
<h3>免费注册</h3>
<div class="name">
<input type="text" name="">
<label>姓名</label>
</div>
<div class="mail">
<input type="mail" name="">
<label>邮箱</label>
</div>
<div class="uid">
<input type="text" name="">
<label>用户名</label>
</div>
<div class="passwd">
<input type="password" name="">
<label>密码</label>
</div>
<div class="submit">
<button class="dark">立即注册</button>
</div>
</div>
</div>
</div>
</div>
最后再绑定一下click的触发事件,这样就可以使用了。
$(document).ready(function(){
$(".veen .rgstr-btn button").click(function(){
$('.veen .wrapper').addClass('move');
$('.body').css('background','#ffa500');
});
$(".veen .login-btn button").click(function(){
$('.veen .wrapper').removeClass('move');
$('.body').css('background','#ff4931');
});
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791