HTML5和jQuery实现弹出创意搜索框层的方法

百变鹏仔 2个月前 (10-18) #H5教程

文章标签创意

本文主要分享了jquery和html5弹出创意搜索框层的实例代码。具有一定的参考价值，下面一起来看下吧

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

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><p><a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/sousuokuang.htm">原文</a></p><form onSubmit="submitFn(this, event);" name="yestop"><p class="search-wrapper"><p 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></p><span class="close" onClick="searchToggle(this, event);"></span><p class="result-container"></p></p></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(&#39;.search-wrapper&#39;);if (!container.hasClass(&#39;active&#39;)) {container.addClass(&#39;active&#39;);evt.preventDefault();}else if (container.hasClass(&#39;active&#39;) && $(obj).closest(&#39;.input-holder&#39;).length == 0) {container.removeClass(&#39;active&#39;);// clear inputcontainer.find(&#39;.search-input&#39;).val(&#39;&#39;);// clear and hide result container when we press closecontainer.find(&#39;.result-container&#39;).fadeOut(100, function () { $(this).empty(); });}}function submitFn(obj, evt) {var value = $(obj).find(&#39;.search-input&#39;).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(&#39;.result-container&#39;).html(&#39;<span>&#39; + _html + &#39;</span>&#39;);$(obj).find(&#39;.result-container&#39;).fadeIn(100);evt.preventDefault();}

文章推荐

HTML5和jQuery实现弹出创意搜索框层的方法

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集