點選可以展開和關閉的搜尋框程式碼例項
本章節分享一段程式碼例項,它實現了點選可以使搜尋伸長和關閉。
具有動畫效果,非常的美化,這是jQuery結合css3實現的。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="author" content="http://www.softwhy.com/" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>CSS3搜尋框動畫特效</title> <style type="text/css"> html, body { height: 100%; } body { padding: 0px; margin: 0px; background: url(demo/jQuery/img/image.jpg); background-position: center; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; } .search-wrapper { position: absolute; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; left: 50%; } .search-wrapper .input-holder { overflow: hidden; height: 70px; background: rgba(255,255,255,0); border-radius: 6px; position: relative; width: 70px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .search-wrapper.active .input-holder { border-radius: 50px; width: 450px; background: rgba(0,0,0,0.5); -webkit-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570); -moz-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570); transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570); } .search-wrapper .input-holder .search-input { width: 100%; height: 50px; padding: 0px 70px 0 20px; opacity: 0; position: absolute; top: 0px; left: 0px; background: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: none; outline: none; font-family: "Open Sans", Arial, Verdana; font-size: 16px; font-weight: 400; line-height: 20px; color: #FFF; -webkit-transform: translate(0, 60px); -moz-transform: translate(0, 60px); transform: translate(0, 60px); -webkit-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570); -moz-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570); transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; } .search-wrapper.active .input-holder .search-input { opacity: 1; -webkit-transform: translate(0, 10px); -moz-transform: translate(0, 10px); transform: translate(0, 10px); } .search-wrapper .input-holder .search-icon { width: 70px; height: 70px; border: none; border-radius: 6px; background: #FFF; padding: 0px; outline: none; position: relative; z-index: 2; float: right; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .search-wrapper.active .input-holder .search-icon { width: 50px; height: 50px; margin: 10px; border-radius: 30px; } .search-wrapper .input-holder .search-icon span { width: 22px; height: 22px; display: inline-block; vertical-align: middle; position: relative; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650); -moz-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650); transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650); } .search-wrapper.active .input-holder .search-icon span { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } .search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after { position: absolute; content: ''; } .search-wrapper .input-holder .search-icon span::before { width: 4px; height: 11px; left: 9px; top: 18px; border-radius: 2px; background: #974BE0; } .search-wrapper .input-holder .search-icon span::after { width: 14px; height: 14px; left: 0px; top: 0px; border-radius: 16px; border: 4px solid #974BE0; } .search-wrapper .close { position: absolute; z-index: 1; top: 24px; right: 20px; width: 25px; height: 25px; cursor: pointer; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); transform: rotate(-180deg); -webkit-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110); -moz-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110); transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } .search-wrapper.active .close { right: -50px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570); -moz-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570); transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570); -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; transition-delay: 0.5s; } .search-wrapper .close::before, .search-wrapper .close::after { position: absolute; content: ''; background: #FFF; border-radius: 2px; } .search-wrapper .close::before { width: 5px; height: 25px; left: 10px; top: 0px; } .search-wrapper .close::after { width: 25px; height: 5px; left: 0px; top: 10px; } .search-wrapper .result-container { width: 100%; position: absolute; top: 80px; left: 0px; text-align: center; font-family: "Open Sans", Arial, Verdana; font-size: 14px; display: none; color: #B7B7B7; } @media screen and (max-width: 560px) { .search-wrapper.active .input-holder { width: 200px; } } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> 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'); container.find('.search-input').val(''); container.find('.result-container').fadeOut(100, function(){$(this).empty();}); } } $(document).ready(function () { $(".search-icon").click(function () { searchToggle(this, event); }) $(".close").click(function () { searchToggle(this, event); }) }) </script> </head> <body> <form> <div class="search-wrapper"> <div class="input-holder"> <input type="text" class="search-input" placeholder="請輸入關鍵字" /> <button class="search-icon"><span></span></button> </div> <span class="close"></span> <div class="result-container"></div> </div> </form> </body> </html>
相關文章
- 點選獲取焦點可以伸縮的搜尋框程式碼例項
- 搜尋框帶有搜尋提示點選消失程式碼例項
- 搜尋框關鍵字智慧匹配例項程式碼例項
- 滑鼠懸浮可以伸縮的搜尋框程式碼例項
- 點選標題可以展開效果程式碼例項
- 美觀的搜尋框程式碼例項
- div css搜尋框效果程式碼例項CSS
- jQuery可伸縮搜尋框程式碼例項jQuery
- jQuery點選展開收起程式碼例項jQuery
- 點選側邊欄展開和收縮程式碼例項
- Windows10搜尋框怎麼關閉_Win10如何關閉搜尋框WindowsWin10
- 點選左右箭頭可以移動選項例項程式碼
- jQuery點選文字框清除內容程式碼例項jQuery
- 文字框點選清除預設文字例項程式碼
- 在文字框輸入關鍵詞可以實現篩選功能程式碼例項
- 在網頁中加入百度搜尋框例項程式碼網頁
- 點選按鈕複製文字框文字程式碼例項
- js點選文字框選中文字效果程式碼例項JS
- js搜尋關鍵詞自動匹配功能程式碼例項JS
- 二叉搜尋樹程式碼例項
- 文字框獲得和失去焦點程式碼例項
- 點選文字框彈出可檢索下拉選單程式碼例項
- 點選方向鍵實現文字框焦點切換程式碼例項
- 點選Cell控制UITableViewCell的展開及關閉UIView
- css3單選框、核取方塊和開關按鈕美化效果程式碼例項CSSS3
- 點選連結a彈出一個確認框例項程式碼
- win10怎麼關閉工作列搜尋框 win10 工作列取消搜尋框方法Win10
- js div層漸變方式開啟和關閉效果程式碼例項JS
- js實現的可以通用的選項卡程式碼例項JS
- javascript實現的點選彈出刪除提示框程式碼例項JavaScript
- 點選文字框彈出可供選擇的checkbox核取方塊程式碼例項
- 2 Day DBA-管理Oracle例項-關於例項的啟動和關閉-關於例項關閉Oracle
- JavaScript點選投票效果程式碼例項JavaScript
- win10系統關閉cortana搜尋框後怎麼重新開啟Win10
- 將搜尋關鍵詞高亮顯示例項程式碼
- 短視訊系統原始碼,點選選擇框,底部彈出可以選擇的選項原始碼
- javascript關閉當前視窗例項程式碼JavaScript
- hbuilder mui如何監聽搜尋框點選清除按鈕UI