jQuery+HTML5实现弹出创意搜索框层

效果体验：http://demo.jb51.net/js/2016/sousuokuang_jb51/

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

代码下载：http://xiazai.jb51.net/201612/yuanma/sousuokuang_jb51.rar

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();
}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • jquery实现弹出窗口效果的实例代码

    JavaScript实现弹出窗口实质上就是在浏览器上画了一个方形区域,并在开始时将其隐藏,只是到某个JavaScript事件时才通过修改css的属性值来将其显示出来. 其大致步骤为: •创建一个装载弹出窗口的div 复制代码 代码如下: <html>  <head>    <title>jQuery实例1:浮动窗口</title>    <meta http-equiv="Content-Type" content="te

  • jQuery实现的模拟弹出窗口功能示例

    本文实例讲述了jQuery实现的模拟弹出窗口功能.分享给大家供大家参考,具体如下: //初始化文档 $(document).ready(); //----------------弹出DIV仿模态窗口开始---------------- var divW; //DIV宽度 var divH; //DIV高度 var clientH; //浏览器高度 var clientW; //浏览器宽度 var divTitle; //DIV标题 var pageUrl; //DIV中加载的页面 var div

  • jQuery弹出窗口完整代码(居中,居左,居右)

    jQuery弹出窗口完整代码(居中,居左,居右)

    核心代码: 复制代码 代码如下: //获取窗口的高度 var windowHeight; //获取窗口的宽度 var windowWidth; //获取弹窗的宽度 var popWidth; //获取弹窗高度 var popHeight; function init(){ windowHeight=$(window).height(); windowWidth=$(window).width(); popHeight=$(".window").height(); popWidth=$(

  • jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法

    jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法

    本文实例讲述了jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法.分享给大家供大家参考,具体如下: 一.先描述下可以实现什么: 下拉框一改变,弹出框出现,选择弹出框中的值会赋值给下拉菜单 二.代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Subscribe策略</ti

  • jQuery弹出窗口打开链接的实现代码

    下面给大家分享一段jquery代码实现弹出窗口打开链接的实现方法 window.open(url, name, style, replace); //弹出窗口打开链接,参数:网址,命名,窗体样式,是否替代原窗口 用处:打开新窗体,打开自定义页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在弹出窗口中打开新连接</title> </h

  • Jquery弹出窗口插件 LeanModal的使用方法

    Jquery弹出窗口插件 LeanModal的使用方法

    开发网站少不了要经常用弹出窗口的形式,今天在网上搜了个小插件LeanModal,记录于此,方便自己,亦方便他人使用. 此插件是个老外写的,体积小是它最大的优点,压缩后1k不到.当然,此插件是寄生于JQuery上. 一. 效果图 二.使用步骤: 1.引用Jquery.js和leanModal.min.js 复制代码 代码如下: <script src="Javascript/jquery-1.4.1.min.js" type="text/javascript"&

  • jQuery实现弹出窗口中切换登录与注册表单

    jQuery实现弹出窗口中切换登录与注册表单

    当点击页面中的登录或注册按钮时,将会弹出一个模态窗口,就是一个弹出层,我们可以在弹出层上轻松的切换登录与注册表单,极大的方便用户,不需要关闭层再去点击转向其他操作,在很多网站上已经广泛应用. 本文结合实例,通过使用jQuery以及CSS3和HTML5技术实现这一效果. HTML 我们现在主页面上设置两个链接按钮,即登录和注册按钮. <nav class="main_nav"> <ul> <li><a class="cd-signin&

  • jQuery+jqmodal弹出窗口实现代码分明

    jQuery+jqmodal弹出窗口实现代码分明

    先上图,最终效果如下 点击"信息确认" 就是弹出一个确认窗口,把已经填报的信息都放到里面看看. 信息放里面很简答,主要是弹出窗口要做得好看点. 所以选择了jQuery+jqmodal实现 实现方法如下1.页面中引用jquery-1.4.2.js和jqModal.js,注意jQuery要在前面,因为jqmodal是以jQuery为基础的. 2.建立jqModal.css,并引用,主要是些美工的东东,注意div.jqmDialog 的 display为 none.高度和宽度要设置好,挡住下

  • AeroWindow 基于JQuery的弹出窗口插件

    AeroWindow 基于JQuery的弹出窗口插件

    可以一个页面中创建多个弹出窗,被选中的弹出窗会加亮显示,在同一网页中可以有多个弹出窗口,也可以通过双击窗口实现最大化,跟windows像极了.如果想要做一个类似操作系统的页面,用这个插件是完全可以实现的.兼容多种主流浏览器. 最基础的调用方法: 复制代码 代码如下: $('#YourContainerDiv').AeroWindow((WindowTitle:'hello world',)); 带全部参数的调用: 复制代码 代码如下: $('#YourContainerDiv').AeroWin

  • jQuery+HTML5实现弹出创意搜索框层

    效果体验:http://demo.jb51.net/js/2016/sousuokuang_jb51/ 本效果适用于移动设备,可以使用手机等浏览效果. 代码下载:http://xiazai.jb51.net/201612/yuanma/sousuokuang_jb51.rar HTML代码如下: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8">

  • jquery使用ColorBox弹出图片组浏览层实例演示

    本示例使用Jquery的ColorBox插件弹出图片组浏览层.效果预览网址:http://www.keleyi.com/keleyi/phtml/colorbox/ 以下是本效果的完整代码,将以下代码保存到html文件,打开即可预览效果. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra

  • jquery实现鼠标悬浮弹出气泡提示框

    jquery实现鼠标悬浮弹出气泡提示框

    jquery鼠标悬浮弹出气泡提示框,供大家参考,具体内容如下 居中的图片 代码 我在网上找了很多例子都是单独的一个,所以我修改了jquery的一点代码,让它可以在一个页面上多次使用,原文的地址我没找到,相信我这个会更好一点. //别忘了导入js文件! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>气泡显示</title> <script

  • jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

    jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

    弹出层用来向用户展示详细的信息,交互性非常强.弹出层有对话框.模态窗口等形式,这里我都把他们叫做弹出层,我的同事们也是这么叫的.一般我们喜欢使用比较成熟的弹出层插件如fancybox等,但在本文,我将先抛弃插件,给大家介绍如何使用jQuery+CSS3+Html5实现弹出层. 效果展示       源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式.甚至js方法调用.我们最终做出来的弹出层效果应该是响应式的,也就是说可以

  • JQuery Mobile 弹出式登录框的实现方法

    JQuery Mobile 弹出式登录框的实现方法

    <a href="#login" data-rel="popup" data-position-to="window" data-role="button">Login</a> <div data-role="popup" id="login" data-theme="a"> <form style="padding

  • jQuery中ztree 点击文本框弹出下拉框的实例代码

    废话不多说了,具体代码如下所示: <link rel="stylesheet" href="${ctx}/res/js/ztree/css/demo.css" type="text/css"/> <link rel="stylesheet" href="${ctx}/res/js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/cs

  • jQuery仿IOS弹出框插件

    jQuery仿IOS弹出框插件

    这款弹出框插件是本人自己模仿IOS原生弹出框写的一个自定义插件,包括Alert弹出框和Confirm确认框,支持标题,内容,按钮文字以及按钮回调函数自定义,使用非常简单,可以进行扩展,下面是插件使用方法,一看就懂: 首先导入jquery库和插件库以及css文件 <script src="./jquery-1.8.3.min.js"></script> <script src="./jquery.confirm-1.1.js">&l

  • jQuery点击弹出层弹出模态框点击模态框消失代码分享

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title>jQuery弹出层 模态框</title> <script src="./jquery.min.js" type="text/javascript"></script> <style> .btn{ height:100px; } .black_o

  • jQuery实现气球弹出框式的侧边导航菜单效果

    jQuery实现气球弹出框式的侧边导航菜单效果

    本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的气球弹出框式的侧边导航菜单,预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了:当然,在实际使用中,不会出现这样的问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-alt-dlg-left-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUB

  • Jquery实现顶部弹出框特效

    Jq制作的页面顶部动态弹出的提示框,可以用于提示信息的显示以及通知信息的显示. Html代码 <div class="tooltiptop"> <div class="bg"></div> <div class="main"><i>Jq顶部弹出框</i><span onClick="ToolTipTop.Hide();" title="关闭

随机推荐