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

发布时间：2018-08-24 13:11 所属栏目：121 来源：站长网

导读：这也是一款利用 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>
提示：运行后需要刷新显示效果!

（编辑：ASP站长网）