JS+CSS实现仿新浪微博搜索框的方法


Posted in Javascript onFebruary 24, 2015

本文实例讲述了JS+CSS实现仿新浪微博搜索框的方法。分享给大家供大家参考。具体实现方法如下:

<!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" xml:lang="en">

<head>

 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

 <title>JS+CSS仿类似新浪微博搜索框的效果</title>

 <style type="text/css">

 * { padding:0; margin:0;}

 body { font-size:14px; }

 #box { width:600px; margin:40px auto;}

 #in { width:240px; height:24px; line-height:24px; border:1px solid #369; border-radius:4px; box-shadow:inset 0 0 2px #999; }

 #suggest { display:none; position:relative; margin-top:-1px; width:240px; padding-top:1px; border:1px solid #369; border-top:0 none;

border-radius:4px; box-shadow:inset 0 0 2px #999; overflow:hidden; }

 #suggest a { display:block; color:#f00; height:24px; line-height:24px; text-decoration:none; padding:0 4px;}

 #suggest a:hover { background:#eee;}

 #suggest a span { color#369;}

  </style>

  <script type="text/javascript">

 window.onload=function(){

 //声明一坨变量供下面使用

 var obox=document.getElementById("box");

 obj=document.getElementById("in");

 osug=document.getElementById("suggest");

 oa=osug.getElementsByTagName("span");

//兼容ie和火狐浏览器的方式,但是经测试发现ie678可以ie9却不行在删除的时候无法触发,网上查下说有ie9这个问题

 obj.oninput=obj.onpropertychange=onchange;

 function onchange(){

  var txt=this.value;

  var words=txt.length;

  if(words==0){

   osug.style.display="none";

  }else if(words<=8){

   osug.style.display="block";

   for( var i=0;len=oa.length,i<len;i++){

    oa[i].innerHTML=txt;

   }

  }else if(words>8){

   osug.style.display="block";

   var limit=txt.substring(0,8)+"...";

   for( var i=0;len=oa.length,i<len;i++){

    oa[i].innerHTML=limit;

   }

  }

 }

}

function disbox(){

   document.getElementById("suggest").style.display="none";

  }

</script>

</head>

<body>

 <dl id="box">

  <dt><input onblur="disbox()" type="text" name="" id="in" /></dt>

  <dd id="suggest" >

        <a href="###">搜“<span></span>”相关微博</a>

        <a href="###">搜“<span></span>”相关用户</a>

  </dd>

 </dl>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 Javascript
基于vue.js实现的分页
Mar 13 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
详解Vue.directive 自定义指令
Mar 27 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
JavaScript实现刮刮乐效果
Nov 01 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 #Javascript
JS给超链接加确认对话框的方法
Feb 24 #Javascript
javascript实现图片循环渐显播放的方法
Feb 24 #Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 #Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 #Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 #Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 #Javascript
You might like
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
基于PHP文件操作的详解
2013/06/05 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
js 上传图片预览问题
2010/12/06 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
Python 用户登录验证的小例子
2013/03/06 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
开业庆典主持词
2014/03/21 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
五年级小学生评语
2014/12/26 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS