Loading... CSS+JS学习笔记 来源时间2018/8/5 <!--more--> 展示地址:[在线demo][1] 展示图片:![静态图][2] 小熊猫图片来源网络侵删 代码展示: <div class="tip inlineBlock share"> HTML代码 </div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login - 小茉莉设计</title> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="login"> <div class="login-cc"> <img src="img/1.png" id="img-1"> <img src="img/2.png" id="img-2"> <img src="img/3.png" id="img-3"> <hr> <h3>Login</h3> <div class="input"> <input type="text" value="" placeholder="请输入账号" id="do_login_1"> <input type="password" value="" placeholder="请输入密码" id="do_login_2"> <button data-v-6cb98ece="" class="btn">登录</button> <div style="height: 35px;" id="out"></div> </div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script> <script src="js/main.js"></script> </body> </html> <div class="tip inlineBlock share"> CSS代码(main.css) </div> body { background-color: #f4f5f5 } img { display: none; width: 150px; height: 130px; margin: 0 auto } .login { background-color: #fff; height: 500px; width: 300px; -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); margin: 0 auto; margin-top: 100px } .login-cc { text-align: center } #img-1 { display: block } input { padding: 10px; width: 100%; border: 1px solid #e9e9e9; border-radius: 2px; outline: 0; box-sizing: border-box; margin-top: 10px } .input { margin: 40px } .input > button { border: none; padding: .5rem 1.3rem; transition: background-color .3s, color .3s; width: 100%; height: 2.334rem; color: #fff; background-color: #007fff; border-radius: 2px; outline: 0; box-sizing: border-box; cursor: pointer; margin-top: 15px } input:focus { border-color: #007fff } <div class="tip inlineBlock share"> javascript代码(main.js) </div> $("#do_login_1").click(function () { var isFocus = $("#do_login_1").is(":focus"); if (true == isFocus) { $("#img-1").css('display', 'none') $("#img-2").css('display', 'block') $("#img-3").css('display', 'none') } }); $("#do_login_2").click(function () { var isFocus = $("#do_login_2").is(":focus"); if (true == isFocus) { $("#img-2").css('display', 'none') $("#img-3").css('display', 'block') $("#img-1").css('display', 'none') } }); $("button").click(function () { var isFocus = $("#do_login_1").is(":focus"); if (true != isFocus) { $("#img-2").css('display', 'none') $("#img-3").css('display', 'none') $("#img-1").css('display', 'block') } var isFocus = $("#do_login_2").is(":focus"); if (true != isFocus) { $("#img-2").css('display', 'none'); $("#img-3").css('display', 'none'); $("#img-1").css('display', 'block'); } layer.alert('登录成功了( ◕ x ◕ )!'); }); $("#out").click(function () { $("#img-2").css('display', 'none'); $("#img-3").css('display', 'none'); $("#img-1").css('display', 'block'); }) <div class="tip inlineBlock share"> 小熊猫素材 </div> 三个图~ ![1][3] ![2][4] ![3][5] 再送大家一个图,自己diy一下 嘿嘿 /斜眼笑 ♂♂♂ ![4][6] [1]: https://blog.ccdalao.cn/blog/demo/css/3/index.html [2]: https://blog.ccdalao.cn/usr/uploads/time/5e79de1635175.png [3]: https://blog.ccdalao.cn/blog/demo/css/3/img/1.png [4]: https://blog.ccdalao.cn/blog/demo/css/3/img/2.png [5]: https://blog.ccdalao.cn/blog/demo/css/3/img/3.png [6]: https://blog.ccdalao.cn/blog/demo/css/3/img/4.jpg 最后修改:2020 年 03 月 24 日 © 禁止任何形式转载 打赏 赞赏作者 支付宝微信 赞 0 如果觉得我的文章对你有用,请随意赞赏
1 条评论
不错诶 拿走了