jQuery滑动注册与登录特效代码

来源:https://www.sucaihuo.com/js/1961.html 2017-05-17 22:51浏览(2295) 收藏

简单实用的注册和登录特效代码,点击按钮可以在注册和登录之间进行切换,背景颜色也会随之改变,输入框和按钮的颜色也跟着背景变化。
jQuery滑动注册与登录特效代码
分类:表单代码 > 注册登录框 难易:入门级
查看演示 下载资源 下载积分: 30 积分

本例样式调用了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');
	});
});
评论0
头像

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

1 2