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 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
JS+Canvas实现五子棋游戏
Aug 26 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
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
基于javascript实现放大镜特效
2020/12/03 Javascript
Python设计模式之单例模式实例
2014/04/26 Python
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
简述 Python 的类和对象
2020/08/21 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
劳动之星获奖感言
2014/02/01 职场文书
精彩的广告词
2014/03/19 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
英镑符号 £
2022/02/17 杂记
Python经常使用的一些内置函数
2022/04/11 Python
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技
python中使用redis用法详解
2022/12/24 Redis