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

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

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 input
container.find(&＃39;.search-input&＃39;).val(&＃39;&＃39;);
// clear and hide result container when we press close
container.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 += "" + value + "";
}
$(obj).find(&＃39;.result-container&＃39;).html(&＃39;&＃39; + _html + &＃39;&＃39;);
$(obj).find(&＃39;.result-container&＃39;).fadeIn(100);
evt.preventDefault();
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！