基于jquery登录框特效.zip资源-CSDN文库

共21个文件

jpg：6个

html：5个

css：3个

版权申诉

html5

jQuery

javascript

150 浏览量 2022-11-25 10:22:43 上传评论收藏 496KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

基于jquery登录框特效.zip （21个子文件）

基于jquery登录框特效

jiaoben65

css

demo.css 4KB

font-awesome.css 14KB

style.css 23KB

index5.html 3KB

index4.html 2KB

images

blurred.jpg 46KB

bg3.jpg 59KB

wood_pattern.jpg 14KB

noise.png 5KB

bg.jpg 42KB

bg2.jpg 111KB

index.html 2KB

jquery.placeholder.min.js 2KB

modernizr.custom.63321.js 9KB

index2.html 4KB

font

fontawesome-webfont.eot 38KB

fontawesome-webfont.woff 41KB

fontawesome-webfont.svg 127KB

fontawesome-webfont.ttf 67KB

index3.html 3KB

基于jquery登录框特效.jpg 55KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>www.moobnn.com</title> <meta name="author" content="Codrops" /> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script src="js/modernizr.custom.63321.js"></script>  <style> body { background: #e1c192 url(images/wood_pattern.jpg); } </style> </head> <body> <div class="container"> <header> <h1>www.moobnn.com</h1> <h2>www.moobnn.com</h2> <nav class="codrops-demos"> <a href="index.html">Demo 1</a> <a class="current-demo" href="index2.html">Demo 2</a> <a href="index3.html">Demo 3</a> <a href="index4.html">Demo 4</a> <a href="index5.html">Demo 5</a> </nav> <div class="support-note"> <span class="note-ie">Sorry, only modern browsers.</span> </div> </header> <section class="main"> <form class="form-2"> <h1><span class="log-in">Log in</span> or <span class="sign-up">sign up</span></h1> <p class="float"> <label for="login"><i class="icon-user"></i>Username</label> <input type="text" name="login" placeholder="Username or email"> </p> <p class="float"> <label for="password"><i class="icon-lock"></i>Password</label> <input type="password" name="password" placeholder="Password" class="showpassword"> </p> <p class="clearfix"> <a href="#" class="log-twitter">Log in with Twitter</a> <input type="submit" name="submit" value="Log in"> </p> </form></section> </div>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".showpassword").each(function(index,input) { var $input = $(input); $("<p class='opt'/>").append( $("<input type='checkbox' class='showpasswordcheckbox' id='showPassword' />").click(function() { var change = $(this).is(":checked") ? "text" : "password"; var rep = $("<input placeholder='Password' type='" + change + "' />") .attr("id", $input.attr("id")) .attr("name", $input.attr("name")) .attr('class', $input.attr('class')) .val($input.val()) .insertBefore($input); $input.remove(); $input = rep; }) ).append($("<label for='showPassword'/>").text("Show password")).insertAfter($input.parent()); }); $('#showPassword').click(function(){ if($("#showPassword").is(":checked")) { $('.icon-lock').addClass('icon-unlock'); $('.icon-unlock').removeClass('icon-lock'); } else { $('.icon-unlock').addClass('icon-lock'); $('.icon-lock').removeClass('icon-unlock'); } }); }); </script> <center><p><br>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE浏览器。</p><br> 厚朴网络<a href="http://www.moobnn.com/" target="_blank">厚朴网络</a></center> </body> </html>

评论收藏

内容反馈

版权申诉