jQuery实现点击Input淡入淡出的下拉菜单

发布时间：2018-08-20 06:46:36 所属栏目：政策来源：站长网

导读：这是一个类似于下拉菜单的效果，点击INPUT输入框后，就会有一个淡出的下拉菜单，点击选项后，自动传值到输入框中，越来越发现 jQuery 是一个强大的东西。实例效果： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/x

　　这是一个类似于下拉菜单的效果，点击INPUT输入框后，就会有一个淡出的“下拉菜单”，点击选项后，自动传值到输入框中，越来越发现jQuery是一个强大的东西。

　　实例效果：

<!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> <title>jQuery实现点击Input淡入淡出的下拉菜单 - Liehuo.Net</title> <script src="http://www.veryhuo.com/uploads/Common/js/WindowClose.js" type="text/javascript"></script> <script src="http://www.veryhuo.com/uploads/Common/js/jquery-1.4.js" type="text/javascript"></script> <script> $(document).ready(function() { //去重，去空格版,坐标修正 var theMainDivSelectData = "#divMian"; DownDivHideShowTest('#Text1', theMainDivSelectData, 'liehuo.net∴liehuo.org∴欢迎访问'); DownDivHideShowTest('#Text2', theMainDivSelectData, 'liehuo∴liehuo∴liehuo∴liehuo∴liehuo∴net'); DownDivHideShowTest('#Text3', theMainDivSelectData, 'www∴liehuo∴liehuo∴liehuo∴liehuo∴net∴net∴net'); DownDivHideShowTest('#Text4', theMainDivSelectData, '爱烈火∴烈火好∴∴∴∴∴∴烈火网∴上烈火'); DownDivHideShowTest('#Text5', theMainDivSelectData, '烈火学院∴""∴""∴""∴""∴""∴∴∴∴∴∴∴∴∴∴∴∴∴∴∴∴∴∴∴∴∴∴∴∴liehuo.net'); DownDivHideShowTest('#Text6', theMainDivSelectData, '烈火学院∴一直致力于∴为网页设计∴为WEB开发∴为网站运营∴∴∴∴∴∴∴∴提供动力！'); DownDivHideShowTest('#Text7', theMainDivSelectData, '网站不赚钱？？∴∴∴∴∴∴∴∴∴∴网站没有流量？∴不会SEO优化？？∴∴快上烈火网学习！'); }); </script> </head> <body> <div id="divMian" > <div style="height:706px;"></div> <input id="Text5" type="text" style="height:306px;" /> <input id="Text6" type="text" /> <input id="Text1" type="text" style="width:506px" /> <input id="Text7" type="text" /> <div style="height:706px;"></div> <input id="Text2" type="text" /> <input id="Text3" type="text" /> <input id="Text4" type="text" /> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：南京站长网）

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