表单JS弹出填写提示效果代码


Posted in Javascript onApril 16, 2011

HTML

<form id="form1" runat="server"> 
<div> 
<div style="margin-top:100px"> 
<asp:TextBox ID="TextBox1" runat="server" HintTitle="增加的内容信息标题" HintInfo="控制在100个字数内,标题文本尽量不要太长。"></asp:TextBox></div> 
</div> 
</form>

页面中的样式
<style type="text/css"> 
.focus 
{ 
border: 1px solid #FC0 !important; 
background: url(Admin/Images/focus_bg.jpg) repeat-x !important; 
color: #00F !important; 
} 
/*提示文字样式*/ 
#HintMsg 
{ 
width: 271px; 
position: absolute; 
display: none; 
} 
#HintMsg .HintTop 
{ 
height: 9px; 
background: url(Admin/Images/hintbg1.gif) no-repeat; 
overflow: hidden; 
} 
#HintMsg .HintInfo 
{ 
padding: 0 5px; 
border-left: 1px solid #000; 
border-right: 1px solid #000; 
background: #FFFFE1; 
line-height: 1.5em; 
} 
#HintMsg .HintInfo b 
{ 
display: block; 
margin-bottom: 6px; 
padding-left: 15px; 
background: url(Admin/Images/hint.gif) left center no-repeat; 
height: 13px; 
line-height: 16px; 
} 
#HintMsg .HintInfo b span 
{ 
display: block; 
float: right; 
text-indent: -9999px; 
background: url(Admin/Images/close.gif) no-repeat; 
width: 12px; 
height: 12px; 
cursor: pointer; 
} 
#HintMsg .HintFooter 
{ 
height: 22px; 
background: url(Admin/Images/hintbg2.gif) no-repeat; 
} 
</style>

关键JS
$(function() { 
$(".input,.login_input,.textarea").focus(function() { 
$(this).addClass("focus"); 
}).blur(function() { 
$(this).removeClass("focus"); 
}); 
//输入框提示,获取拥有HintTitle,HintInfo属性的对象 
$("[HintTitle],[HintInfo]").focus(function(event) { 
$("*").stop(); //停止所有正在运行的动画 
$("#HintMsg").remove(); //先清除,防止重复出错 
var HintHtml = "<ul id=\"HintMsg\"><li class=\"HintTop\"></li><li class=\"HintInfo\"><b>" + $(this).attr("HintTitle") + "</b>" + $(this).attr("HintInfo") + "</li><li class=\"HintFooter\"></li></ul>"; //设置显示的内容 
var offset = $(this).offset(); //取得事件对象的位置 
$("body").append(HintHtml); //添加节点 
$("#HintMsg").fadeTo(0, 0.85); //对象的透明度 
var HintHeight = $("#HintMsg").height(); //取得容器高度 
$("#HintMsg").css({ "top": offset.top - HintHeight + "px", "left": offset.left + "px" }).fadeIn(500); 
}).blur(function(event) { 
$("#HintMsg").remove(); //删除UL 
}); 
});

效果图:

 表单JS弹出填写提示效果代码

以上内容来子一个下载的网站,具体的名字忘记了....仅作参考

Javascript 相关文章推荐
js函数调用常用方法详解
Dec 03 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
详解EasyUi控件中的Datagrid
Aug 23 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
js字符串处理之绝妙的代码
Apr 05 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 #Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 #Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 #Javascript
js网页侧边随页面滚动广告效果实现
Apr 14 #Javascript
jquery下jstree简单应用 - v1.0
Apr 14 #Javascript
JQuery之拖拽插件实现代码
Apr 14 #Javascript
jQuery创建插件的代码分析
Apr 14 #Javascript
You might like
基于mysql的论坛(2)
2006/10/09 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
javascript如何实现create方法
2019/11/04 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
Python解析json代码实例解析
2019/11/25 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
部队学习十八大感言
2014/01/11 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
公司奖励通知
2015/04/21 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python