下载资源()次
阅读次数()次
发布时间:2014-06-27
来源:xw素材网
jQuery点击按钮弹出登录页面效果。
文件引用:
<script type="text/javascript"> $(function ($) { //弹出登录 $("#example").hover(function () { $(this).stop().animate({ opacity: '1' }, 600); }, function () { $(this).stop().animate({ opacity: '0.6' }, 1000); }).on('click', function () { $("body").append("<div id='mask'></div>"); $("#mask").addClass("mask").fadeIn("slow"); $("#LoginBox").fadeIn("slow"); }); // //按钮的透明度 $("#loginbtn").hover(function () { $(this).stop().animate({ opacity: '1' }, 600); }, function () { $(this).stop().animate({ opacity: '0.8' }, 1000); }); //文本框不允许为空---按钮触发 $("#loginbtn").on('click', function () { var txtName = $("#txtName").val(); var txtPwd = $("#txtPwd").val(); if (txtName == "" || txtName == undefined || txtName == null) { if (txtPwd == "" || txtPwd == undefined || txtPwd == null) { $(".warning").css({ display: 'block' }); } else { $("#warn").css({ display: 'block' }); $("#warn2").css({ display: 'none' }); } } else { if (txtPwd == "" || txtPwd == undefined || txtPwd == null) { $("#warn").css({ display: 'none' }); $(".warn2").css({ display: 'block' }); } else { $(".warning").css({ display: 'none' }); } } }); //文本框不允许为空---单个文本触发 $("#txtName").on('blur', function () { var txtName = $("#txtName").val(); if (txtName == "" || txtName == undefined || txtName == null) { $("#warn").css({ display: 'block' }); } else { $("#warn").css({ display: 'none' }); } }); $("#txtName").on('focus', function () { $("#warn").css({ display: 'none' }); }); // $("#txtPwd").on('blur', function () { var txtName = $("#txtPwd").val(); if (txtName == "" || txtName == undefined || txtName == null) { $("#warn2").css({ display: 'block' }); } else { $("#warn2").css({ display: 'none' }); } }); $("#txtPwd").on('focus', function () { $("#warn2").css({ display: 'none' }); }); //关闭 $(".close_btn").hover(function () { $(this).css({ color: 'black' }) }, function () { $(this).css({ color: '#999' }) }).on('click', function () { $("#LoginBox").fadeOut("fast"); $("#mask").css({ display: 'none' }); }); }); </script>
邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。