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


Posted in Javascript onDecember 29, 2016

效果体验:http://demo.3water.com/js/2016/sousuokuang_3water/

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

代码下载:http://xiazai.3water.com/201612/yuanma/sousuokuang_3water.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();
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
Bootstrap3 内联单选和多选框
Dec 29 #Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 #Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 #Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 #Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 #Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 #Javascript
jQuery实现6位数字密码输入框
Dec 29 #Javascript
You might like
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
Prototype Number对象 学习
2009/07/19 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
Python实现批量修改文件名实例
2015/07/08 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
python实现决策树分类(2)
2018/08/30 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
python调用摄像头的示例代码
2020/09/28 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
影视动画专业个人的自我评价
2013/12/31 职场文书
设计师个人求职信范文
2014/02/02 职场文书
2015年元旦活动总结
2014/05/09 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
2014年招生工作总结
2014/11/26 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
党小组意见范文
2015/06/08 职场文书
小学英语教学反思范文
2016/02/15 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS