简单的模拟类似新浪微博搜索框的效果

原创 2015年11月19日 15:11:12
<!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>简单的模拟类似新浪微博搜索框的效果 站长学院  www.pigzz.com</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>
    站长学院 代码测试专用  www.pigzz.com
    <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>

Android 仿百度手机助手首页滑动效果

今天看到百度手机助手首页上的滑动效果非常nice,主要功能归结为: 1、当手指上划时,顶部搜索栏随手指移动距离而缩小到隐藏,隐藏后内容还是可以继续移动 2、手指下滑时,当显示内容达到第一个时...
  • believer123
  • believer123
  • 2015年07月01日 11:53
  • 2568

iOS开发-仿新浪博客个人主页效果

在仿微博主页时,对其做了小小的改动,效果怎样,看大家项目的需求了: 分段控制器用的是YUSegment; 头部下拉放大使用的HFStretchableTableHeaderView,这个虽然很久了...
  • qq_24874679
  • qq_24874679
  • 2017年03月16日 15:44
  • 772

Android 仿今日头条首页标题栏效果

今天带来的是仿今日头条首页的联动滑动效果,废话不多说,先上效果图: 思路: 做这个我们需要实现的效果有 1、滑动内容区域,标题栏会有变化来显示当前所处的位置。 2、点击标题栏,内容区域也会随着...
  • mackkill
  • mackkill
  • 2016年03月30日 14:10
  • 4260

IOS 之模拟网易新闻主页的滚动效果

近下载了一个网易新闻的APP客户端,觉得新闻主页的滚动效果不错,每个标题都对应一个版面,如图...
  • shenjie12345678
  • shenjie12345678
  • 2014年05月15日 10:53
  • 24132

Android仿京东首页画轴效果

记得之前京东首页有一个效果,有一个画轴,然后可以滚动画轴,去打开画(不知道怎么去形容这个效果,就叫做画轴效果吧- -!),然后去做相关操作,刚开始看到这个效果,想法是动态的去改变一个ImageView...
  • u013904672
  • u013904672
  • 2016年12月12日 18:40
  • 1308

Android中RecyclerView布局代替GridView实现类似支付宝的界面

单纯使用GridView 通用的两种给GridView 添加分割线的方法;http://stackoverflow.com/questions/7132030/android-gridview-dr...
  • qq_15970265
  • qq_15970265
  • 2016年12月16日 11:21
  • 1889

自定义UITabBar--实现类似新浪微博中间的发送按钮

之前公司提出一个需求,让点击tabBar上中间的一个按钮然后发送一些内容,效果就像新浪微博中中间的发送按钮。可由于公司有其他的功能需求所以这个需求也一直没有真正地下达。最近看一个网上的视频教程,发现有...
  • u010105969
  • u010105969
  • 2016年09月30日 11:45
  • 629

模仿新浪微博刷新显示多少条数据

第一步就是在刷新后方法 中添加调用方法并且传入刷新出来额新数据 // 提示用户最新的微博数量 [self showNewStatusesCount:newStatuses.count...
  • tongwei117
  • tongwei117
  • 2016年08月03日 22:34
  • 853

iOS类似探探交友滑动动画分析

之前分析过探探交友软件中扫描动画,今天来展示分析一下探探左右滑动的动画。看一下效果图。                                                         ...
  • baidu_33735542
  • baidu_33735542
  • 2016年05月15日 21:23
  • 3816

Android仿IOS上拉下拉弹性效果

本文转自:http://blog.csdn.net/u014733374/article/details/42739345 用过iphone的朋友相信都体验过页面上拉下拉有一个弹性的效果...
  • small_technical
  • small_technical
  • 2016年07月01日 11:58
  • 2115
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:简单的模拟类似新浪微博搜索框的效果
举报原因:
原因补充:

(最多只允许输入30个字)