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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
js 手机号码合法性验证代码集合
Sep 29 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
javascript实现Table排序的方法
May 15 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
js回调函数原理与用法案例分析
Mar 04 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
phpfans留言版用到的install.php
2007/01/04 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
javascript iframe编程相关代码
2009/12/28 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
六个窍门助你提高Python运行效率
2015/06/09 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
外贸英语毕业生自荐信
2013/11/14 职场文书
二年级数学教学反思
2014/01/21 职场文书
司仪主持词两篇
2014/03/22 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
十八大宣传标语
2014/10/09 职场文书
2014年幼师工作总结
2014/11/22 职场文书
优秀党员申报材料
2014/12/18 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
APP界面设计技巧和注意事项
2022/04/29 杂记