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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
javascript 子窗体父窗体相互传值方法
May 31 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
详解javascript数组去重问题
Nov 06 Javascript
详解node HTTP请求客户端 - Request
May 05 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
Vue.js仿Select下拉框效果
Feb 18 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
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
js文字横向滚动特效
2015/11/11 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
使用python画社交网络图实例代码
2019/07/10 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
python的等深分箱实例
2019/11/22 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
python简单实现插入排序实例代码
2020/12/16 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
会计岗位描述
2014/02/22 职场文书
保险内勤岗位职责
2014/04/05 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
婚前财产协议书范本
2014/10/19 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python