效果体验：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. ASP.NET MVC 和 Ruby 相结合的Web框架Oak

    在http://www.asp.net/mvc/open-source 上有个项目Oak: Frictionless development for ASP.NET MVC single page w ...

  2. Dropbox创造共享新思维——Datastore API

    7月9日,第一届Dropbox开发者大会上,Dropbox发布了Datastore API的beta版本,通过这个API,原始的结构化数据可以在多个设备间的Dropbox内同步.CEO Drew Ho ...

  3. PYTHON黑帽编程1.5 使用WIRESHARK练习网络协议分析

    Python黑帽编程1.5  使用Wireshark练习网络协议分析 1.5.0.1  本系列教程说明 本系列教程,采用的大纲母本为<Understanding Network Hacks At ...

  4. Socket programing(make a chat software) summary 1:How to accsess LAN from WAN

    First we should know some basic conceptions about network: 1.Every PC is supposed to have its own IP ...

  5. 入手Invicta 8926 OB潜水自动机械腕表

    前个月前就想入手一款手表了,之前在关注和学习.询问他人选哪样的表好,前些天还在看精工Seiko机械表系列,今凌晨有朋友给我推荐这款Invicta 8926系列手表,我一看便喜欢了. 在网上也是搜索了很 ...

  6. salesforce 零基础学习（四十三）运算取余

    工作中遇到一个简单的小问题,判断两个数是否整除,如果不整除,获取相关的余数. 习惯java的我毫不犹豫的写下了代码 public Boolean isDivisibility(Integer divi ...

  7. "org.eclipse.wst.validation" has been removed 导入maven 项目出错。

    在谷歌中找到解决方案: 右键关闭项目,在打开,将项目刷新,选中项目右键----->Maven4myeclipse------->Update maven project 错误消失. 若还有 ...

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

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

  9. 关于xcode导出设置中的一些概念

    Development Certificates:在电脑通过秘钥串生成一个私人秘钥,这就是:CertificateSigningRequest.certSigningRequest 简称CSR,团队中 ...

  10. JavaScript知识 一、JS的数据类型

    一.JS的数据类型 1.基本类型 JS共有5大基本类型,分别是: 1)Undefined.他只有一个值:undefined.如果一个变量被定义但是没有给他赋值,那么这个时候系统会默认给这个变量赋值为u ...