微信扫码登录 ×
jQuery简单有趣的登录框代码

jQuery简单有趣的登录框代码

收藏
jQuery简单有趣的登录框代码
jQuery有趣的登录框,输入密码时卡通人物蒙眼动画效果代码。

使用方法:

1、head引入css文件

<link rel="stylesheet" type="text/css" href="css/detailsmusic.css" />

2、head引入js文件

<script src="js/jquery-1.9.1.min.js"></script>

3、body引入HTML代码

<div class="music-lgin">

	<div class="music-lgin-all">
		<!--左手-->
		<div class="music-lgin-left ovhd">
			<div class="music-hand">
				<div class="music-lgin-hara"></div>
				<div class="music-lgin-hars"></div>
			</div>
		</div>

		<!--脑袋-->
		<div class="music-lgin-dh">
			<div class="music-lgin-alls">
				<div class="music-lgin-eyeleft">
					<div class="music-left-eyeball yeball-l"></div>
				</div>
				<div class="music-lgin-eyeright">
					<div class="music-right-eyeball yeball-r"></div>
				</div>
				<div class="music-lgin-cl"></div>
			</div>
			<!--鼻子-->
			<div class="music-nose"></div>
			<!--嘴-->
			<div class="music-mouth music-mouth-ds"></div>
			<!--肩-->
			<div class="music-shoulder-l">
				<div class="music-shoulder"></div>
			</div>
			<div class="music-shoulder-r">
				<div class="music-shoulder"></div>
			</div>
			<!--消息框-->
			<div class="music-news">来了,老弟!</div>
		</div>

		<!--右手-->
		<div class="music-lgin-right ovhd">
			<div class="music-hand">
				<div class="music-lgin-hara"></div>
				<div class="music-lgin-hars"></div>
			</div>
		</div>

	</div>

	<!--1-->
	<div class="music-lgin-text">
		<input class="inputname inputs" type="text" placeholder="用户名" value="admin"/>
	</div>
	<!--2-->
	<div class="music-lgin-text">
		<input type="password" class="mima inputs" placeholder="密码" />
	</div>
	<!--3-->
	<div class="music-lgin-text">
		<input class="music-qd inputs" type="button" value="确定" />
	</div>

</div>

<script type="text/javascript">
	//眼睛 密码部分
	$(".mima").focus(function() {
		$(".music-lgin-left").addClass("left-dh").removeClass("rmleft-dh");
		$(".music-lgin-right").addClass("right-dh").removeClass("right-rmdh");
		$(".music-hand").addClass("no");
	}).blur(function() {
		$(".music-lgin-left").removeClass("left-dh").addClass("rmleft-dh");
		$(".music-lgin-right").removeClass("right-dh").addClass("right-rmdh");
		$(".music-hand").removeClass("no");

	})
	//点击小人出来
	$(".inputname").focus(function() {
		$(".music-lgin-all").addClass("block");
		$(".music-news").addClass("no")
	})
	//点击小人消失

	//          $(".music-qd").focus(function(){
	//          	$(".music-lgin-all").removeClass("block")
	//          })


	//注册正则 简单判断
	 
	$('.music-qd').click(function(){
		if(($('.inputname').val()=='')){
			$(".music-news").html("请输入名称")      
		}else if(($('.mima').val()=='')){
			 $(".music-news").html("请输入密码")
			$(".music-news").addClass("block")
		}else{
			alert('提交ajax')
		}      
	})
</script>

使用声明

1. 本站所有素材(未指定商用),仅限学习交流。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。

x
×
×

注册

QQ注册 立即下载 微信注册 立即下载

签到成功!

已连续签到1天,连续签到3天可获得50积分

知道了