php点击按钮弹出搜索框,HTML5和jQuery实现弹出创意搜索框层的方法

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

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

HTML代码如下：

jQuery+CSS3创意搜索框特效 - 何问起

首页 特效 原文

其中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 += "" + value + "";

}

$(obj).find('.result-container').html('' + _html + '');

$(obj).find('.result-container').fadeIn(100);

evt.preventDefault();

}

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

相关推荐：