这是一个关于HTML5搜索框的特效，当用户点击搜索框时，会弹出一个分类搜索框。文章提供了实现这个效果的代码结构，包括引入CSS、JS和HTML代码部分。此外，还提到了键盘导航事件和防止表单提交的处理。
特效描述：html5搜索框特效 点击搜索框弹出 分类搜索框。点击搜索框弹出分类搜索框代码
代码结构
1. 引入CSS
2. 引入JS
3. HTML代码
Search
Popular
Page Preloading Effect
Arrow Navigation Styles
Ideas for Subtle Hover Effects
Halcyon Days Template
Inspiration for Article Intro Effects
Draggable Dual-View Slideshow
(function() {
var morphSearch = document.getElementById( 'morphsearch' ),
input = morphSearch.querySelector( 'input.morphsearch-input' ),
ctrlClose = morphSearch.querySelector( 'span.morphsearch-close' ),
isOpen = isAnimating = false,
// show/hide search area
toggleSearch = function(evt) {
// return if open and the input gets focused
if( evt.type.toLowerCase() === 'focus' && isOpen ) return false;
var offsets = morphsearch.getBoundingClientRect();
if( isOpen ) {
classie.remove( morphSearch, 'open' );
// trick to hide input text once the search overlay closes
// todo: hardcoded times, should be done after transition ends
if( input.value !== '' ) {
setTimeout(function() {
classie.add( morphSearch, 'hideInput' );
setTimeout(function() {
classie.remove( morphSearch, 'hideInput' );
input.value = '';
}, 300 );
}, 500);
}
input.blur();
}
else {
classie.add( morphSearch, 'open' );
}
isOpen = !isOpen;
};
// events
input.addEventListener( 'focus', toggleSearch );
ctrlClose.addEventListener( 'click', toggleSearch );
// esc key closes search overlay
// keyboard navigation events
document.addEventListener( 'keydown', function( ev ) {
var keyCode = ev.keyCode || ev.which;
if( keyCode === 27 && isOpen ) {
toggleSearch(ev);
}
} );
/***** for demo purposes only: don't allow to submit the form *****/
morphSearch.querySelector( 'button[type="submit"]' ).addEventListener( 'click', function(ev) { ev.preventDefault(); } );
})();
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
