郁闷吧
懒人建站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
图片展示
下拉菜单
左右滚动
选项卡
二级导航
jQuery弹出层
来源：
懒人建站
|
发布人：懒人建站
|
2010-03-25
|
热度：次
|
收 藏
|
报 错
上一篇：
基于jQuery弹出层有9种效果
下一篇：
年/月/日三级联动JS代码
相关代码
基于jQuery弹出窗口插件特效AsyncBox-v1.2.6
基于jQuery弹出层插件thickbox
进入网页时的提示层可设定12小时只出一次
基于jquery划过或点击链接加载提示页面20种效果
淘宝联盟右下角弹出层可记忆cookie可最小化可关
jquery弹出层插件jquery.msgbox5.0
右侧边点击弹出层菜单
点击input输入框弹出选择层(基于jquery)
等待几秒(2秒)才出现的提示层(jQuery)
暴强的图片和网页展示插件lytebox(可载入网页)
弹出层被选择框(select)遮挡
当前子类
导航菜单
焦点幻灯片
广告代码
网页特效
jquery 特效
滚动代码
qq在线客服代码
选项卡代码
jquery弹出层
栏目热点
基于jQuery弹出层有9种效果
基于jQuery的弹出层
基于jQuery弹出层插件thickbox
摄影网站照片展示jquery特效(图片组展示
jQuery点击左右滚动产品图片展示代码
Jquery点击登录按钮弹出登录层
jquery弹出层插件jquery.msgbox5.0
仿wordpress 3D旋转标签云JS代码
基于jQuery的图片展示简洁版
弹出提示层背景半透明不可操作
懒人建站
相关
最新
随机
标签
相关文章
基于jQuery弹出窗口插件特效AsyncBox-v1.2.6
基于jQuery弹出层插件thickbox
进入网页时的提示层可设定12小时只出一次
基于jquery划过或点击链接加载提示页面20种效果
淘宝联盟右下角弹出层可记忆cookie可最小化可关
jquery弹出层插件jquery.msgbox5.0
右侧边点击弹出层菜单
点击input输入框弹出选择层(基于jquery)
等待几秒(2秒)才出现的提示层(jQuery)
暴强的图片和网页展示插件lytebox(可载入网页)
最新文章
自适应宽度的html+css图片提交按钮代码
图片大小固定的html+css图片提交按钮代码
为网站增加圣诞节祝福动画百度的圣诞老人动画
日期时间带星期农历js代码特效
仿腾讯|新浪微博的文本向下滚动JS特效代码
向上逐行滚动JS代码文本特效，鼠标划过暂停
基于jQuery弹出窗口插件特效AsyncBox-v1.2.6
向左滚动的文字特效JS代码
向上滚动的文字特效JS代码
基于jQuery弹出层插件thickbox
随机推荐
JQuery自动切换焦点图片(带文字说明)
iframe自适应高度JS代码特效
JS实现flash效果的竖向折叠二级菜单(HTML+CSS+JS)
点击问题展开隐藏的答案JS代码
几个输入内容框同步输入JS代码
图片大小固定的html+css图片提交按钮代码
鼠标划过搜索框弹出关键词提示层
只半透明背景不透明文字的CSS写法
鼠标滑过图片实现图片的局部放大JS特效代码
鼠标划过显示title说明并且title属性支持html代码
热门标签
弹出层
jQuery
图片展示
下拉菜单
左右滚动
选项卡
二级导航
jQuery弹出层
HTML+CSS
弹出窗口
右下角
导航菜单
CSS技巧
点击滚动
JS代码
设计技巧
设计理论
jQuery插件
SEO
界面设计
jQuery
|
jquery特效
|
jQuery弹出层
|
JS代码
|
js特效代码大全
|
JS广告代码
|
下拉菜单代码
|
QQ客服
|
html+css
Copyright © 2008-2009
懒人建站
www.51xuediannao.com 版权所有
Powered by
懒人建站
备案号：豫ICP备09003854号
登 录
|
注 册
你也许会喜欢
X 关闭
↑返回顶部
→相关代码/文章
收藏到：
百度搜藏
新浪微博
QQ空间
更多
香港
免备案
空间，一年
80元
，500M空间、
免费送100M mysql
数据库。
香港新世界
电讯机房，与
万网
香港空间同机房，
懒人建站
同服务器。
速度演示：
jquery 特效
懒人建站
