HTML5和jQuery实现弹出创意搜索框层的方法
导读:收集整理的这篇文章主要介绍了HTML5和jQuery实现弹出创意搜索框层的方法,觉得挺不错的,现在分享给大家,也给大家做个参考。本文主要分享了jquery和HTML5弹出创意搜索框层的实例代码。具有一定的参考价值,下面一起来看下吧本效果适用...
收集整理的这篇文章主要介绍了HTML5和jQuery实现弹出创意搜索框层的方法,觉得挺不错的,现在分享给大家,也给大家做个参考。本文主要分享了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('.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 inputcontainer.find('.search-input').val(''); // clear and hide result container when we Press closecontainer.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(); }
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
HTML5 canvas和JavaScript如何实现本地截图
html5和css3以及jquery实现音乐播放器
以上就是HTML5和jQuery实现弹出创意搜索框层的方法的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: HTML5和jQuery实现弹出创意搜索框层的方法
本文地址: https://pptw.com/jishu/584263.html