效果体验：http://hovertree.com/texiao/jquery/26/

本效果适用于移动设备，可以使用手机等浏览效果。

代码下载：http://hovertree.com/h/bjaf/e14uccpw.htm

HTML代码如下：

 <!doctype html>

 <html lang="zh">

 <head>

 <meta charset="UTF-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

 <title>jQuery+CSS3创意搜索框特效 - 何问起</title>

 <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/26/css/default.css" />

 <!--必要样式-->

 <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/26/css/search-form.css" />

 </head>

 <body>

 <div>

 <a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/sousuokuang.htm">原文</a>

 </div>

 <form onSubmit="submitFn(this, event);" name="yestop">

 <div class="search-wrapper">

 <div class="input-holder">

 <input type="text" class="search-input" placeholder="请输入关键词" name="hewenqi" />

 <input type="hidden" name="q" />

 <button class="search-icon" onClick="searchToggle(this, event);"><span></span></button>

 </div>

 <span class="close" onClick="searchToggle(this, event);"></span>

 <div class="result-container">

 </div>

 </div>

 </form>

 <script src="http://hovertree.com/ziyuan/jquery/jquery-1.12.0.min.js" type="text/javascript"></script>

 <script type="text/javascript" src="http://hovertree.com/texiao/jquery/26/js/hovertreesearch.js"></script>

 </body>

 </html>

其中hovertreesearch.js的代码如下：

 function searchToggle(obj, evt) {

 var container = $(obj).closest('.search-wrapper');

 if (!container.hasClass('active')) {

 container.addClass('active');

 evt.preventDefault();

 }

 else if (container.hasClass('active') && $(obj).closest('.input-holder').length == 0) {

 container.removeClass('active');

 // clear input

 container.find('.search-input').val('');

 // clear and hide result container when we press close

 container.find('.result-container').fadeOut(100, function () { $(this).empty(); });

 }

 }

 function submitFn(obj, evt) {

 var value = $(obj).find('.search-input').val().trim();

 var _html = "您搜索的关键词： ";

 if (!value.length) {

 _html = "关键词不能为空。";

 }

 else {

 window.open("http://cn.bi" + "ng.com/search?q=site%3Ahove" + "rtree.com " + value + "&hewenqi=yestop");

 _html += "<b>" + value + "</b>";

 }

 $(obj).find('.result-container').html('<span>' + _html + '</span>');

 $(obj).find('.result-container').fadeIn(100);

 evt.preventDefault();

 }

更多特效：http://www.cnblogs.com/roucheng/p/texiao.html

jQuery+HTML5弹出创意搜索框层的更多相关文章

  1. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  2. jQuery制作弹出窗（模态框）

    来源:(二少)在南极 ##index.html <!DOCTYPE html><html lang="zh"><head> <meta c ...

  3. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  4. js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  5. jquery 简单弹出层(转)

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

  6. jQuery.reveal弹出层

    jQuery.reveal弹出层使用 最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说 ...

  7. JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法(转）

    原文:JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法 jquery-easyui是一个基于jquery的图形界面插件,利用easyui可以创建很多好看的网页界面 ...

  8. 解决PL/SQL Dev连接Oracle弹出空白提示框

    第一次安装Oracle,装在虚拟机中,用PL/SQL Dev连接远程数据库的时候老是弹出空白提示框,网上找了很久,解决方法也很多,可是就是没法解决我这种情况的. 没办法,只能自己研究,经过大概一天时间 ...

  9. IE中使用ajaxSubmit上传文件弹出下载提示框

    使用jQuery的ajaxSubmit 上传文件时,在IE中会弹出下载提示框: 解决方法:让action返回String类型,而不是ActionView,

随机推荐

  1. 三种观察者模式的C#实现

    系列主题:基于消息的软件架构模型演变 说起观察者模式,估计在园子里能搜出一堆来.所以写这篇博客的目的有两点: 观察者模式是写松耦合代码的必备模式,重要性不言而喻,抛开代码层面,许多组件都采用了Publ ...

  2. [译]Asp.net MVC 之 Contorllers（一）

    Asp.net MVC contorllers 在Ajax全面开花的时代,ASP.NET Web Forms 开始慢慢变得落后.有人说,Ajax已经给了Asp.net致命一击.Ajax使越来越多的控制 ...

  3. RegSvr32注册OCX时报错

    RegSvr32注册OCX时报错. 错误1: 模块“dsoframer2007.ocx”已加载,但对 DllRegisterServer 的调用失败,错误代码为 0x80070005. 有关此问题的详 ...

  4. 由ArcMap属性字段自增引出字段计算器使用Python的技巧

    1.前言       前些日子有人问我ArcMap中要让某个字段的值实现自增有什么方法?我首先想到像SQL Server中对于数值型字段可以设置自增.所以我打开ArcCatalog查看发现只提供默认值 ...

  5. C#设计模式系列：外观模式（Facade）

    外观模式主要解决的问题是:当我们有多个类要处理时,往往要一个类一个类地区调用,没有复用性和扩展性.外观模式通过定义一个界面,把处理子类的过程封装成操作,主要就把用户从复杂的调用过程中解放出来. 1.外 ...

  6. Easyui 让Window弹出居中与最大化后居中

    easyui1.3.2版本,window的弹出不会居中了.而dialog是会居中的,我们必须为为window的open事件做扩展 代码如下:只要加入以下代码即可.如果你是看了MVC项目系列的,把他放到 ...

  7. Android启动icon切图大小

    我们在给app切图的时候不知道告诉ui启动图标切多大,其实你新建一个android项目就知道应该切多大了.新建一个项目会产生几种大小的启动图标. 我把各个文件夹下的ic_launcher.png文件都 ...

  8. MySQL学习笔记五：数据类型

    MySQL支持多种数据类型,大致可以分为数值,日期/时间和字符类型. 数值类型 MySQL支持所有标准SQL数值数据类型,包括严格数值数据类型(INTEGER.SMALLINT.DECIMAL和NUM ...

  9. 窥探Swift系列博客说明及其Swift版本间更新

    Swift到目前为止仍在更新,每次更新都会推陈出新,一些Swift旧版本中的东西在新Swift中并不适用,而且新版本的Swift会添加新的功能.到目前为止,Swift为2.1版本.去年翻译的Swift ...

  10. PHP关于web页面交互内容

    学php学了有一段时间了总结总结给大家分享一下 PHP中的引用 第一段程序: <?php $first_name="firstName"; $first=&$firs ...