郁闷吧
懒人建站QQ群：4188479 63242849 39070147 130690866
懒人建站
主页
JS代码
导航菜单
焦点幻灯片
广告代码
网页特效
jquery 特效
滚动代码
建站技巧
威客网排行榜
用户体验设计
html+css
html+css技巧
html+css布局实例
html+css模板
兼职网站大全
当前位置：
懒人建站
>
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层模拟的效果，这样的模拟会更灵活多变。
TAG标签
jQuery
下拉菜单
左右滚动
导航菜单
选项卡
网上赚钱
二级导航
右下角
来源：
懒人建站
|
发布人：懒人建站
|
2010-03-25
|
热度：次
|
收 藏
|
报 错
上一篇：
基于jQuery弹出层有9种效果
下一篇：
年/月/日三级联动JS代码
相关代码
基于jQuery弹出层插件thickbox
进入网页时的提示层可设定12小时只出一次
基于jquery划过或点击链接加载提示页面20种效果
淘宝联盟右下角弹出层可记忆cookie可最小化可关
jquery弹出层插件jquery.msgbox5.0
右侧边点击弹出层菜单
点击input输入框弹出选择层(基于jquery)
等待几秒(2秒)才出现的提示层(jQuery)
暴强的图片和网页展示插件lytebox(可载入网页)
弹出层被选择框(select)遮挡
可以拖动的居中弹出层带遮罩效果
当前子类
导航菜单
焦点幻灯片
广告代码
网页特效
jquery 特效
滚动代码
qq在线客服代码
选项卡代码
栏目热点
基于jQuery弹出层有9种效果
基于jQuery的弹出层
基于jQuery弹出层插件thickbox
摄影网站照片展示jquery特效(图片组展示
Jquery点击登录按钮弹出登录层
jquery弹出层插件jquery.msgbox5.0
jQuery点击左右滚动产品图片展示代码
仿wordpress 3D旋转标签云JS代码
QQ空间的弹出层效果（可鼠标移动可载入
基于jQuery的图片展示简洁版
懒人建站
相关
最新
随机
标签
相关文章
基于jQuery弹出层插件thickbox
进入网页时的提示层可设定12小时只出一次
基于jquery划过或点击链接加载提示页面20种效果
淘宝联盟右下角弹出层可记忆cookie可最小化可关
jquery弹出层插件jquery.msgbox5.0
右侧边点击弹出层菜单
点击input输入框弹出选择层(基于jquery)
等待几秒(2秒)才出现的提示层(jQuery)
暴强的图片和网页展示插件lytebox(可载入网页)
弹出层被选择框(select)遮挡
最新文章
为网站增加圣诞节祝福动画百度的圣诞老人动画
日期时间带星期农历js代码特效
仿腾讯|新浪微博的文本向下滚动JS特效代码
向上逐行滚动JS代码文本特效，鼠标划过暂停
基于jQuery弹出窗口插件特效AsyncBox-v1.2.6
向左滚动的文字特效JS代码
向上滚动的文字特效JS代码
基于jQuery弹出层插件thickbox
仿wordpress 3D旋转标签云JS代码
摄影网站照片展示jquery特效(图片组展示)
随机推荐
仿百度纯JS日历 带农历
文本向上滚动可指定间隔时间
只半透明背景不透明文字的CSS写法
点击input输入框弹出选择层(基于jquery)
一个页面可以使用多次的选项卡
点击展开全部内容DIV层
微软首页竖向TAB滑动门
年/月/日三级联动JS代码
最简洁的用户控制改变字体大小JS代码
可设置一天弹一次的弹出新窗口JS代码
热门标签
jQuery
下拉菜单
左右滚动
导航菜单
选项卡
网上赚钱
二级导航
右下角
JS代码
CSS技巧
设计理论
自动滚动
QQ客服
界面设计
JS
SEO
jQuery弹窗
QQ
kingcms
jQuery提示层
jQuery
|
jquery特效
|
jQuery弹出层
|
JS代码
|
js特效代码大全
|
JS广告代码
|
下拉菜单代码
|
QQ客服
|
html+css
Copyright © 2008-2009
懒人建站
www.51xuediannao.com 版权所有
Powered by
懒人建站
备案号：豫ICP备09003854号
登 录
|
注 册
懒人建站
