Maison > interface Web > tutoriel HTML > 如何通过html,javascript 实现这个效果_html/css_WEB-ITnose

如何通过html,javascript 实现这个效果_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 12:02:31
original
1065 Les gens l'ont consulté

默认

邮箱输对了以后


回复讨论(解决方案)

默认

邮箱输对了以后


最外面是一个div,里面左边input框,右边一个图像

<!DOCTYPE html><html><head>    <meta charset="utf-8"/>    <title>test</title>    <link rel="stylesheet" type="text/css" href="http://iconfont.cn/assets/application-7fe01c67f0bffcd30bd1ca90c54c3c2f.css" media="all"/>    <style type="text/css">        .wrap{ width:350px;border:1px solid #ccc;}        .wrap *{ display:inline-block;}        .text{width: 90%; border:none;}        .icon{ width:16px; height:16px; background:url(https://passport.jd.com/new/misc/skin/df/i/login-all-bg.png) -373px -111px no-repeat;}        .ok{ background-position:0 -241px;}    </style>    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script></head><body><div id="wrap" class="wrap"><input type="text" class="text" name="" id=""/><span class="icon"></span></div><script type="text/javascript">    function isEmail(val){        return /^[a-zA-Z0-9\._-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(val);    }    $('.text').keyup(function(){        var el = $(this).next();        if(isEmail($(this).val())){            el.addClass('ok');        } else {            el.removeClass('ok');        }    });</script></body></html>
Copier après la connexion

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal