jQuery+HTML5彈出創意搜尋框層

阿新 • • 發佈：2019-01-19

 1 <!doctype html>
 2 <html lang="zh">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 7 < 
title>jQuery+CSS3創意搜尋框特效 - 何問起</title>
 8 <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/26/css/default.css" />
 9 <!--必要樣式-->
10 <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/26/css/search-form.css" />
11 
12 </head> 

13 <body>
14 <div>
15 <a href="http://hovertree.com/">首頁</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/sousuokuang.htm">原文</a>
16 </div>
17 <form onSubmit="submitFn(this, event);" name="yestop">
18 <div class 
="search-wrapper">
19 <div class="input-holder">
20 <input type="text" class="search-input" placeholder="請輸入關鍵詞" name="hewenqi" />
21 <input type="hidden" name="q" />
22 <button class="search-icon" onClick="searchToggle(this, event);"><span></span></button>
23 </div>
24 <span class="close" onClick="searchToggle(this, event);"></span>
25 <div class="result-container">
26 
27 </div>
28 </div>
29 </form>
30 
31 <script src="http://hovertree.com/ziyuan/jquery/jquery-1.12.0.min.js" type="text/javascript"></script>
32 <script type="text/javascript" src="http://hovertree.com/texiao/jquery/26/js/hovertreesearch.js"></script>
33 </body>
34 </html>

其中hovertreesearch.js的程式碼如下：

 1 function searchToggle(obj, evt) {
 2 var container = $(obj).closest('.search-wrapper');
 3 
 4 if (!container.hasClass('active')) {
 5 container.addClass('active');
 6 evt.preventDefault();
 7 }
 8 else if (container.hasClass('active') && $(obj).closest('.input-holder').length == 0) {
 9 container.removeClass('active');
10 // clear input
11 container.find('.search-input').val('');
12 // clear and hide result container when we press close
13 container.find('.result-container').fadeOut(100, function () { $(this).empty(); });
14 }
15 }
16 
17 function submitFn(obj, evt) {
18 var value = $(obj).find('.search-input').val().trim();
19 
20 var _html = "您搜尋的關鍵詞： ";
21 if (!value.length) {
22 _html = "關鍵詞不能為空。";
23 }
24 else {
25 window.open("http://cn.bi" + "ng.com/search?q=site%3Ahove" + "rtree.com " + value + "&hewenqi=yestop");
26 _html += "<b>" + value + "</b>";
27 }
28 
29 $(obj).find('.result-container').html('<span>' + _html + '</span>');
30 $(obj).find('.result-container').fadeIn(100);
31 
32 evt.preventDefault();
33 }

jQuery+HTML5彈出創意搜尋框層

1 <!doctype html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content

jquery Bootstrap 彈出框（Popover）顯示html內容，URL，div等

containe inpu lock ext ace src group mar 顯示實現效果：其實有個關鍵點： data-container="body" data-html="true" 註意下就可以了 <button type="button" class=

如何用jQuery實現彈出一個層然後過3秒鐘後自動變淡然後消失

<!DOCTYPE HTML> < html > < head > < meta charset = UTF -8> &l

jquery bootstrap 彈出提示層外掛

/** * boostrap-confirm.js v1.0 author: fengzy */ ;(function($,window,document,undefined){ // var jconfirm, Jconfirm; //對外提供的方法 $.a

jQuery layer彈出層

Jquery圖片彈出框外掛-jQuery lightBox

外掛資訊預覽圖使用步驟 1、新增對以下js和css檔案的引用 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javasc

jQuery彈出關閉遮罩層

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w

html+js/jquery實現彈出層效果

在做網頁的時候，彈出層是個很好用的東西，它既可以顯示出我們想要的內容，又無需重新載入，而且彈出層的樣式還可以按我們想要的效果改動，今天就來說一說怎麼做一個彈出層。首先說一個js的方法。這個方法是以前看到的。既然是做彈出層，那麼當然得先做幾個div出來，如

使用jQuery實現彈出框效果

一，背景由於在專案中需要用到的一個頁面效果是彈出框，在專案中我使用jquery的ui外掛，來實現這個功能，用法也比較簡單二，準備環境 1）引入jquery外掛。在index.html中的頭部加上，以下程式碼 <linkrel="stylesheet"href

用jQuery實現彈出視窗彈出div層

通過今天的jquery例項學習，我們要達到這樣的效果：點選頁面的連結，彈出一個div層，同時頁面的其他部分變灰並且不能點選；無論是改變瀏覽器視窗大小還是下拉滾動條，這個彈出層都能始終保持居中；點選頁面的關閉按鈕，彈出層

自己寫了一個jQuery的彈出層，非常非常簡單

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text

Jquery的彈出框，始終顯示在裝置的正中間

作為前端，彈窗是經常寫的，大多數彈出框都會顯示在裝置（PC或者移動端）的正中間。下面給大家介紹下我的方法，僅供參考！ 1.讓層始終顯示在螢幕正中間： Css程式碼：Html程式碼 .mode

delphi彈出信息框大全

show question 修改可選參數說明 mask lose itl 位置 1．警告信息框 MessageBox(Handle,‘警告信息框‘,‘警告信息框‘,MB_ICONWARNING);2．疑問信息框 MessageBox(Handle,‘疑問信息框‘,‘疑

C#右下角彈出消息框

and 組合 clas ati 功能 inter this AC ide 打開QQ的時候，QQ新聞彈出窗體在屏幕的右下角就會慢慢升起一個小窗口，占用的地方不大，可以起到提示的作用。下面就讓我們來看看，怎樣用系統API來輕松實現這個功能。API原型函數：bool Animat

KeyboardUtil【軟鍵盤彈出後輸入框上移一定的高度】

WPF學習分享(二)——彈出文字輸入框

彈出文字輸入框原本以為WPF彈出文字輸入框很簡單，結果查了一下發現沒有。。。雖然有一些第三方的控制元件，但是由於想要自己實現一個，所以就折騰了一下。首先需要建立一個窗體，而不是使用者控制元件，一開始被這個坑到了一下。 Login.xaml.cs

點選某列表介面上的某按鈕時調出來另一個設計項的列表介面，選中被調出的列表介面上的值時彈出【資料框】能輸入資料的程式碼樣例

//例如：【出庫管理】設計項的列表介面上有一個【出庫】按鈕，點擊出庫按鈕時調出【入庫管理】設計項的列表介面，選中【入庫管理】列表介面上的一條記錄時，彈出輸入框，程式碼樣例如下 function(button, e) { debugger; // 中斷除錯指令，可以手動刪除它

Android EditText彈出軟鍵盤實現頁面標題頭不動，軟鍵盤彈出在編輯框下面

為了實現EditText編輯的時候彈出軟鍵盤標題頭不動，底部編輯框上移，想了好多種方法，也百度，問同事每種辦法都有問題，在這總結一下，希望能幫助到大家。上圖看下效果：可以看到彈出鍵盤的時候，只有EditText在軟鍵盤上面，還有一個藍色點，這個隨後再說。用Relative

js jquery 關閉彈出頁面並重新整理父頁面（window.opener）

function Closepage() { if (window.opener && !window.opener.closed) { window.parent.opener.location.reload(); } window.clos

(轉)C# Windows服務彈出訊息提醒框

出處：http://blog.csdn.net/donghui6116773/article/details/53467069 　　服務（Service）對於大家來說一定不會陌生，它是Windows 作業系統重要的組成部分。我們可以把服務想像成一種特殊的應用程式，它隨系統的“開啟～關閉”而“開始～停止”其工

jQuery+HTML5彈出創意搜尋框層

相關推薦