效果体验：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. 測試大型資料表的 Horizontal Partitioning 水平切割

    FileGroup 檔案群組 :一個「資料庫(database)」可對應一或多個 FileGroup,一個 FileGroup 可由一或多個 file (.ndf) 構成. FileGroup 可讓 ...

  2. Module Zero之语言管理

    返回<Module Zero学习目录> 概览介绍 如何开启 管理语言 管理本地化文本 概览介绍 ABP定义了一个健壮的UI本地化系统,它可用于服务端和客户端.它允许在不同的资源中(Reso ...

  3. 文件上传之Apache commons fileupload使用

    后台servlet代码:         File file1 = null,file2=null;         String description1 = null,description2 = ...

  4. Java 网络爬虫获取页面源代码

    原博文:http://www.cnblogs.com/xudong-bupt/archive/2013/03/20/2971893.html 1.网络爬虫是一个自动提取网页的程序,它为搜索引擎从万维网 ...

  5. android studio sdk 不能更新

    网上看到好多sdk不能更新的,解决办法基本上一下,试了下大都没用,,有人说改hosts ,我试了 貌似没用 下面是我亲测可以更新的一种方法:使用镜像地址更新 步骤: 1. 打开 SDK Manager ...

  6. Java接口和抽象类的区别

    今天看到项目中,写了一个抽象类,里面有很多方法继承了这类,当调用这个接口时,采用的是这个抽象类去调方法的,当时一想,这个不就是我们说的Java的多态的特征: 继承:存在继承关系的子类和父类 重写:子类 ...

  7. Uiautomator 2.0之UiObject2类学习小记

    1. 基础动作 1.1. 相关API介绍 API 说明 clear() 清楚编辑框内的内容 click() 点击一个对象 clickAndWait(EventCondition<R> co ...

  8. SQL Server 2014新特性探秘(2)-SSD Buffer Pool Extension

    简介     SQL Server 2014中另一个非常好的功能是,可以将SSD虚拟成内存的一部分,来供SQL Server数据页缓冲区使用.通过使用SSD来扩展Buffer-Pool,可以使得大量随 ...

  9. Tomcat报java.lang.OutOfMemoryError: Java heap space错误停止运行如何解决

    最近开发的一个商业项目,部署完成后,经常出现Tomcat挂掉的现象,报的异常是:java.lang.OutOfMemoryError: Java heap space,上网google了一下,了解了一 ...

  10. 应用程序框架实战十四:DDD分层架构之领域实体（基础篇）

    上一篇,我介绍了自己在DDD分层架构方面的一些感想,本文开始介绍领域层的实体,代码主要参考自<领域驱动设计C#2008实现>,另外参考了网上找到的一些示例代码. 什么是实体 由标识来区分的 ...