效果体验：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. greenDao 备注

    1.构建文件夹存放自动生成的代码,并在脚本中配置: sourceSets { main { java.srcDirs = ['src/main/java', 'src/main/java-gen'] ...

  2. springboot之HelloWorld

    简介 为了简化开发Spring的复杂度,Spring提供了SpringBoot可以快速开发一个应用,这里就简单介绍下SpringBoot如何快速开发一个J2EE应用 HelloWorld 首先在gra ...

  3. Chrome开发者工具不完全指南：（三、性能篇）

    卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需 ...

  4. 手写原生ajax

    关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...

  5. Android笔记——提升ListView的运行效率

    之所以说 ListView 这个控件很难用,就是因为它有很多的细节可以优化,其中运行效率就是很重要的一点.目前我们ListView 的运行效率是很低的,因为在 FruitAdapter 的getVie ...

  6. Spring MVC和CXF集成

    前提: 1.spring mvc环境已搭建好,能跑起来. 2.下载apache-cxf-2.7.3.zip的压缩包,解压apache-cxf-2.7.3.zip压缩包,拷贝如下几个jar包即可. 配置 ...

  7. LINQ系列：LINQ to SQL Where条件

    1. 单一条件查询 var expr = context.Products .Where(p => p.ProductName == "LINQ to SQL"); SELE ...

  8. Javascript优化细节：短路表达式

    什么是短路表达式? 短路表达式:作为"&&"和"||"操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程 ...

  9. 本地maven仓库使用及配置

    本地仓库的创建 下载 nexus-2.11.4-01-bundle.zip 解压并运行C:\nexus-2.11.4-01-bundle\nexus-2.11.4-01\bin\jsw\windows ...

  10. ssh整合问题总结--使用HibernateTemplate实现数据分页展示

    在进行大量的数据展示时,必须要使用分页查询,第一次使用在SSH框架整合中使用分页查询,遇到了一些问题,下面以我练习的项目为例详细介绍,如何在Spring+hibernate(+action)的环境下完 ...