郁闷吧
懒人建站QQ群：4188479(满) 63242849(满) 39070147
懒人建站
主页
HTML+CSS模板
JS代码
导航菜单
焦点幻灯片
网页特效
广告代码
jQuery
jQuery弹出层
QQ客服
欣赏借鉴
企业类网站
行业类网站
BLOG类网站
门户类网站
商城类网站
威客秘籍
建站技巧
HTML技巧
CSS技巧
CMS建站技巧
其他技巧
MOSS界面定制
YY频道设计
yy娱乐频道设计
yy情侣频道设计图
yy游戏频道设计图
YY个性签名
懒人建站
:
懒人建站
>
JS代码
>
网页特效
>
鼠标划过搜索框弹出关键词提示层
关键字：
弹出层
输入提示
提示层
鼠标划过搜索框或者其他输入框弹出预设关键词的提示层，弹出的提示是DIV层模拟的效果，这样的模拟会更灵活多变。
查看演示
·
进入下载地址列表
收藏
挑错
<!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>鼠标划过搜索框弹出关键词提示层-懒人建站</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- body { margin: 0; padding: 0; color: #000; font-size: 12px; line-height: 160%; text-align: left; height: 100%; font-family: '宋体',Tahoma ,arial,verdana; } *{ margin:0; padding:0;} h2,h2 a:link,h2 a:hover,h2 a:visited{ font-size: 14px; text-decoration: none; color: #000000; } .kw_from { padding:20px 0 0 0px; margin: auto; height: 300px; overflow: hidden; width: 650px; } .kw_from .sbtn{ float:left; width:80px; padding: 16px 0 0 0; } .kw_from .searchMore{ float:left; width:80px; padding: 4px; } #searchNav { width:430px; float: left; } #searchNav #conter1, #searchNav #conter3{ float:left; width:250px; } #searchNav #conter2, #searchNav #conter4{ float:left; width:180px; } #searchNav ul { padding: 0; margin: 0; list-style: none; } #searchNav li { float: left; } #searchNav li ul { display: none; top: 20px; } #searchNav li:hover ul, #searchNav li.over ul { display: block; float:left; } #searchNav ul li a{ float:left; display:block; font-size:12px; padding:3px; text-decoration: none; color: #777; } #searchNav ul li a:hover{ background-color:#f4f4f4; } #searchNav #jobKw{ width:220px; height:18px; } #searchNav #cityKw{ width:130px; height:18px; } --> </style> <script type="text/javascript"> <!--//--><![CDATA[//> <!-- startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("searchNav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; //--><!]]> </script> </head> <body> <div class="kw_from"> <form action="/" method="get" name="searchForm" id="searchForm"> <ul id="searchNav"> <li id="conter1"><h2>鼠标划过输入框看看？</h2> <input id="jobKw" name="jobKw" type="text" /> <ul id="conter3"> <li><a href="http://51xuediannao.com/">懒人建站</a> </li> <li><a href="http://51xuediannao.com/js">JS代码</a></li> <li><a href="http://51xuediannao.com/js/texiao">网页特效</a></li> <li><span class="moreCity"><a href="#">更多>> </a></span></li> </ul> </li> <li id="conter2"><h2>鼠标划过输入框看看？</h2> <input id="cityKw" name="cityKw" type="text" /> <ul id="conter4"> <li><a href="#">中国</a> </li> <li><a href="#">美国</a></li> <li><a href="#">日本</a></li> <li><a href="#">纽约</a></li> <li><a href="#">日本</a></li> <li><a href="#">纽约</a></li> <li><a href="#">上海</a></li> <li><a href="#">深圳</a></li> <li><a href="#">大连</a></li> <li><span class="moreCity"><a href="#">更多</a></span></li> </ul> </li> </ul> <div class="sbtn"> <input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="懒人建站" /> </div> </form> </div> <!--下面只是说明与程序代码无关--> <div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font- size:10pt; line-height:150%;"> <span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集整理 我要 学电脑.COM →51xuediannao.com</a> </span><br> <a href="http://www.51xuediannao.com">懒人建站 http://www.51xuediannao.com</a><br /><br/> <span>我们为您提供- <a href="http://www.51xuediannao.com/html+css/">HTML+CSS模板</a>， <a href="http://www.51xuediannao.com/js/">JS代码</a>， <a href="http://www.51xuediannao.com/JS/texiao/">网页特效</a>， <a href="http://www.51xuediannao.com/JS/nav/">导航菜单</a>， <a href="http://www.51xuediannao.com/JS/Slide/">焦点幻灯片<a>， <a href="http://www.51xuediannao.com/JS/show/">网页欣赏</a>和 <a href="http://www.51xuediannao.com/JS/jiqiao/css/">CSS技巧</a>；</span><br /> <span>懒人建站只收录实用和能提高用户体验的代码</span><br /> <span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span> </div> </body> </html>
代码说明:
鼠标划过搜索框或者其他输入框弹出预设关键词的提示层，当然你可以预设你需要的任何东西。
弹出的提示是DIV层模拟的效果，这样的模拟会更灵活多变。
来源：懒人建站
|
发布人：懒人建站
|
发布时间2010-03-25 10:30
|
热度：次
上一篇：
基于jQuery弹出层有9种效果
下一篇：
年/月/日三级联动JS代码
收藏
挑错
热门标签：
jQuery
jQuery弹出层
QQ客服
弹出层
黄色导航
图片展示
右下角
弹出窗口
相关代码
进入网页时的提示层可设定12小时只出一次
基于jquery划过或点击链接加载提示页面20种效果
淘宝联盟右下角弹出层可记忆cookie可最小化可关
jquery弹出层插件jquery.msgbox5.0
右侧边点击弹出层菜单
点击input输入框弹出选择层(基于jquery)
等待几秒(2秒)才出现的提示层(jQuery)
暴强的图片和网页展示插件lytebox(可载入网页)
弹出层被选择框(select)遮挡
可以拖动的居中弹出层带遮罩效果
基于jQuery弹出层有9种效果
当前子类
导航菜单
焦点幻灯片
网页特效
广告代码
jQuery
jQuery弹出层
QQ客服
弹出层
黄色导航
图片展示
动力之源
栏目热点
基于jQuery的弹出层
基于jQuery弹出层有9种效果
Jquery点击登录按钮弹出登录层
QQ空间的弹出层效果（可鼠标移动可载入
DIV结构的点击收缩展开左边栏代码(html+
鼠标移到文字上弹出提示层JS+CSS代码
弹出层（总是居中）
Ajax的Tab导航滑动门，点击切换(DIV/UL/LI结
jquery弹出层插件jquery.msgbox5.0
随屏滚动侧边QQ客服代码
更多精彩
更多 >>
摄影网站照片展示jquery特
让现在的浏览器支持html
让ie支持CSS圆角属性htc插件
仿百度百科目录鼠标滑过
支持SWF和FLV视频格式的焦
进入网页时的提示层可设
图片上下翻滚式焦点图广
点击鼠标右键弹出收藏到
等待10秒才可以点击的下载
2010广州亚运会倒计时JS代
友情链接
兼职网站大全
ACTCMS
深圳网站建设
北京SEO
IE5678建站网
美易软件
淮安网站优化
158网络创业
缩阴产品排行榜
QQ聊天助手
JS代码
|
网页特效
|
网页特效代码
|
网页特效代码大全
|
jQuery
|
jQuery弹出层
|
QQ客服
Copyright © 2008-2009
懒人建站
www.51xuediannao.com 版权所有
Powered by
懒人建站
备案号：豫ICP备09003854号
会员中心
忘记密码?
