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 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
关于javascript DOM事件模型的两件事
Jul 22 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
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
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
对于Python的框架中一些会话程序的管理
2015/04/20 Python
深入浅析Python字符编码
2015/11/12 Python
python实现单向链表详解
2018/02/08 Python
关于Python作用域自学总结
2019/06/10 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
django实现日志按日期分割
2020/05/21 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
公司总经理工作职责管理办法
2014/02/28 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
庆六一开幕词
2015/01/29 职场文书
vue elementUI表格控制对应列
2022/04/13 Vue.js