jQuery实现点击弹出点击关闭文本域效果

发布时间：2018-11-28 16:34:23 所属栏目：编程来源：站长网

导读：这也是一款操作 jQuery 编写的殊效代码，记得在早年的教程猛火曾经提到过，所谓的网页殊效就是javascript，而此刻各人所行使jQuery（中文发音：J快瑞）就是javascript中的一个款优越框架技能，关于jQuery的进修，请参考猛火提供的jQuery中文进修手册。对

　　这也是一款操作jQuery编写的殊效代码，记得在早年的教程猛火曾经提到过，所谓的网页殊效就是javascript，而此刻各人所行使jQuery（中文发音：J快瑞）就是javascript中的一个款优越框架技能，关于jQuery的进修，请参考猛火提供的jQuery中文进修手册。

　　对付jQuey的笔墨先容我们就不再多说了，往后的教程中，猛火会更为突出的以实例来展示给各人。

　　本文中，两个Button按钮，一个是点击打开，另一个是点击封锁，点击打开后，我们配置的文本域就会缓冲滑动而出，点击封锁就会缓冲滑动的缩回并消散。以下是实例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>jQuery实现点击弹出点击封锁文本域结果 - Liehuo.Net</title> <script src="http://www.veryhuo.com/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script> <style> *{margin:0;padding:0;font-size:12px;} li{float:left;width:100px;border:1px solid #ccc;list-style:none;text-align:center;} h3{margin:20px auto;text-align:center;} input{width:120px;height:30px;cursor:pointer;} #notice{position:absolute;width:400px;padding:20px;background:#eee;border:1px solid #ccc;left:10px;top:10px;display:none;} </style> <script> $(function(){ $('#open').click(function(){ $('#notice').slideDown(); $('#texta').val('猛火网 Liehuo.Net -电脑教程富厚的收集学院').select(); }); $('#closed').click(function(){ $('#notice').slideUp(); }); }); </script></head> <body> <h3> <input id="open" type="button" value="弹出通告" /><br /> <input id="closed" type="button" value="封锁通告" /> </h3> <div id="notice"> <textarea name="" id="texta" cols="30" rows="10"><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：运行后必要革新表现结果!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys