素材牛VIP会员

jquery弹出层登录和全屏注册页面效果

 所属分类:网页特效,网站模版-表单特效,悬浮层/弹出层

 浏览:4408次  评论:1次  更新时间:2016-08-15
牛币素材VIP可免积分下载
jquery弹出层登录和全屏注册页面效果兼容IE8
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:很平滑的jQuery弹出层登录注册效果。外加全屏滑动注册效果

详细介绍

使用方法:

载入CSS样式、jQuery库文件、插件JS文件

<link rel="stylesheet" type="text/css" href="template/ue-content/templates/images/ue_grid.css" />
<link rel="stylesheet" type="text/css" href="template/ue-content/templates/images/style.css" />
<link rel="stylesheet" type="text/css" href="template/ue-content/templates/css/style.css" />
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js">script>
<script language="javascript" src="script/jquery.easing.min.js">script>
<script language="javascript" src="script/custom.js">script>

HTML部分(导航样式、弹出层)

<div id="header">
  <div class="common"> 
    <div class="login fr">
      <div class="loginmenu"><a title="登录或注册">a>div>
      <ul>
        <li class="openlogin"><a href="http://www.sucainiu.com/" onclick="return false;">登录a>li>
        <li class="reg"><a href="http://www.sucainiu.com/" onclick="return false;">注册a>li>
      ul>
    div>   
    <div class="clear">div>
  div>
div>
<div class="clear">div>
<div class="loginmask">div>
<div id="loginalert">
  <div class="pd20 loginpd">
    <h3><i class="closealert fr">i>
      <div class="clear">div>
    h3>
    <div class="loginwrap">
      <div class="loginh">
        <div class="fl">会员登录div>
        <div class="fr">还没有账号<a id="sigup_now" href="http://www.sucainiu.com/" onclick="return false;">立即注册a>div>
        <div class="clear">div>
      div>
      <h3><span>邮箱登录span><span class="login_warning">用户名或密码错误span>
        <div class="clear">div>
      h3>
      <div class="clear">div>
      <form action="" method="post" id="login_form">
        <div class="logininput">
          <input type="text" name="username" class="loginusername" value="邮箱/用户名" />
          <input type="text" class="loginuserpasswordt" value="密码" />
          <input type="password" name="password" class="loginuserpasswordp" style="display:none" />
        div>
        <div class="loginbtn">
          <div class="loginsubmit fl">
            <input type="submit" value="登录" />
            <div class="loginsubmiting">
              <div class="loginsubmiting_inner">div>
            div>
          div>
          <div class="logcheckbox fl">
            <input id="bcdl" type="checkbox" checked="true" />
            保持登录div>
          <div class="fr"><a href="http://www.sucainiu.com/">忘记密码?a>div>
          <div class="clear">div>
        div>
      form>
    div>
  div>
  <div class="thirdlogin">
    <div class="pd50">
      <h4>用第三方帐号直接登录h4>
      <ul>
        <li id="sinal"><a href="http://www.sucainiu.com/">微博账号登录a>li>
        <li id="qql"><a href="http://www.sucainiu.com/">QQ账号登录a>li>
        <div class="clear">div>
      ul>
      <div class="clear">div>
    div>
  div>
div>
<div id="reg_setp">
  <div class="back_setp">返回div>
  <div class="blogo">div>
  <div id="setp_quicklogin">
    <h3>您可以选择以下第三方帐号直接登录素材牛,一分钟完成注册h3>
    <ul class="quicklogin_socical">
      <li class="quicklogin_socical_weibo"><a href="http://www.sucainiu.com/">微博帐号注册a>li>
      <li class="quicklogin_socical_qq"><a href="http://www.sucainiu.com/">QQ帐号注册a>li>
    ul>
  div>
div>

讨论这个素材(1)回答他人问题或分享使用心得会奖励牛币

am***et  
2018年09月29日

还不错~!

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)