简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

jQuery-ツール-オーバーレイの使用法入門_jquery

WBOY
リリース： 2016-05-16 17:51:53
オリジナル
1403 人が閲覧しました
复制代码代码如下:




jQuery ツールのスタンドアロン デモ



href="./overlay-basic.css"/>

/* トリガーのいくつかのスタイル */
#triggers {
text-align:center;
}
#triggers img {
カーソル:ポインタ;
マージン:0 5px;
背景色:#fff;
ボーダー:1px ソリッド #ccc;
パディング:2px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
/* オーバーレイ内の要素のスタイル設定 */
.details {
position:absolute;
トップ:15px;
右:15px;
フォントサイズ:11px;
色:#fff;
幅:150ピクセル;
}
.details h3 {
color:#aba;
フォントサイズ:15px;
}











バルセロナ パビリオン


バルセロナ、スペイン



ルートヴィヒ・ミース・ファン・デル・ローエが設計したバルセロナ・パビリオンは、
スペインの
バルセロナで開催された1929年の万国博覧会のドイツ館でした。それは
近代建築の歴史において重要な建物でした。



何人かの批評家、歴史家、モダニストは、この建物を「
今世紀で最も美しい建物」

と宣言しました。





バルセロナ パビリオン


バルセロナ、スペイン



この建物のもう 1 つのユニークな特徴は、ミースが使用することを選んだ エキゾチックな
素材です。



ティノス・ヴェルデ
アンティコ大理石や金色のオニキスの化粧板などの高級石材のプレート、および半透明のガラスに加えて、グレー、
緑、白の色付きガラスも
として機能します。空間の仕切り。





$(document).ready(function() {
$("img[rel]").overlay({
closeOnClick:false,
マスク: 'darkred'
}) ;
});




CSS

复制代 代码如下:

/*オーバーレイされた要素 */
.simple_overlay {
/* 最初は非表示にする必要があります */
display:none;
/* オーバーレイを他の要素の上に配置します */
z-index:10000;
/* スタイリング */
背景色:#333;
幅:675ピクセル;
最小高さ:200px;
ボーダー:1px ソリッド #666;
/* 最新ブラウザ用の CSS3 スタイル */
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
}
/* 閉じるボタンは右上隅に配置されます */
.simple_overlay .close {
background-image:url(./close.png);
位置:絶対;
右:-15px;
トップ:-15px;
カーソル:ポインタ;
高さ:35px;
幅:35px;
}

关闭的css的命名： xxx .close
性
以下列出的是所有可用的属性选项:
属性 默认值 描述
close   一个jQuery选择器内结束元素 叠加。 这些可以是任何元素,例如链接、按钮或 图像。 如果这不是提供的、亲密的元素 自动生成的。 阅读更多关于此 在 定义关闭行动 。
closeOnClick <span id="OUTFOX_JTR_TRANS_NODE-67" class="OUTFOX_JTR_TRANS_NODE">true </span> 默认情况下,重叠是当鼠标关闭或者 点击区域外。  适合 模态 对话框 。
closeOnEsc <span id="OUTFOX_JTR_TRANS_NODE-76" class="OUTFOX_JTR_TRANS_NODE">true </span> 默认情况下,覆盖网络时关闭键盘ESC键
effect <span id="OUTFOX_JTR_TRANS_NODE-81" class="OUTFOX_JTR_TRANS_NODE"><span>'default'</span> </span>

效果时要使用打开包裹, 关闭。 这可以戏剧性地改变的行为 叠加。 默认情况下这个工具使用一种叫做'default'的影响 这是一个简单的显示/隐藏效果。

以下列出的是现在 可用 效果 你也可以 做你自己的 效果 。

fixed <span id="OUTFOX_JTR_TRANS_NODE-89" class="OUTFOX_JTR_TRANS_NODE"><span>true</span></span> 自从1.2.0 。 保持在相同的是否覆盖 位置,而屏幕滚动。 这是默认 适合所有浏览器的行为除了IE6和下面。 IE6不 支持固定位置。 如果这个属性设置 false 然后是定位在覆盖的 关系到文档,以便在屏幕上滚动 然后叠加与文档一起移动。
mask   之前被称为 暴露 。 覆盖很 经常配合使用 这个 面具工具 。 因为 这样,支持这个特性已经内嵌式 工具。 这个选项接受 这个 面具 配置 。 这不是一个简单的字符串指定 面具的背景颜色或更复杂的对象文字 指定更多的配置变量。

看到的一个例子 叠加 连同面具 。 默认情况下屏蔽是禁用的。

left "center" 指定多远从左边的屏幕的边缘了 叠加应放置。 默认情况下,横向包裹 集中值为"center",但你也可以提供一个 数值指定的距离以像素为单位。
load false 自从1.2.0 。 如果启用了然后覆盖的负载 后立即被初始化。
oneInstance <span id="OUTFOX_JTR_TRANS_NODE-113" class="OUTFOX_JTR_TRANS_NODE">true</span> 默认情况下,只可以有一个叠加在页面。 将这个属性设置为 假 允许您 有 多个 叠加实例 。
speed 'normal' 淡入的速度动画的'normal' 效果。 有效值是 'slow', 'normal' 和 'fast',或者你也可以 提供一个数值(以毫秒为单位)。 通过设置这个 属性为0,则会出现滚动立即没有任何 动画。
target   日程表的元素中指定的(如果不是 这个 rel 属性的触发元素)。
top '10%' 指定如何远离屏幕的顶部边缘的叠加 应放置。 可接受的值是一个整数 指定一个距离(以像素为单位),一个字符串(如“15%”) 指定百分比值或“中心”在这种情况下 叠加是垂直居中。 百分数工作 一直保持在不同的屏幕分辨率。

事件
确保你已经阅读 大约 事件 jQuery工具 。 所有事件监听器接收 这个 事件 对象 作为第一个参数并没有其他参数 为叠加。
事件 什么时候发生的?
onBeforeLoad 叠加显示之前。 叠加已经 定位在该位置将从那里开始动画。
onload 当叠加已经完全被显示
onBeforeClose 关闭之前的叠加
onClose 当叠加是关闭的
スクリプト API
まず、jQuery スクリプト ツールについて理解していることを確認してください。 利用可能なすべての API メソッドを以下に示します:
方法 返回值类型 描述
close() Overlay 关闭叠加。
getClosers() <span id="OUTFOX_JTR_TRANS_NODE-157" class="OUTFOX_JTR_TRANS_NODE">jQuery </span> 返回结束元素(s)作为一个jQuery对象。
getConf() <span id="OUTFOX_JTR_TRANS_NODE-160" class="OUTFOX_JTR_TRANS_NODE">对象 </span> 将配置为叠加。
getOverlay() <span id="OUTFOX_JTR_TRANS_NODE-163" class="OUTFOX_JTR_TRANS_NODE">jQuery </span> 返回元素作为一个jQuery对象日程表。
getTrigger() <span id="OUTFOX_JTR_TRANS_NODE-166" class="OUTFOX_JTR_TRANS_NODE">jQuery </span> 返回元素作为一个jQuery对象触发。
isOpened() boolean 返回 真正的 如果打开包裹。
load() Overlay 打开叠加。  
明日時間を更新して、これについての文を描きます。

タブ: ポータル
タブ (スライドショー): ポータル
ツールチップ: ポータル
オーバーレイ: ポータル
日付入力: ポータル
Ctrip .0 でフレームワーク 2 に取り組んでいますが、何ですか私が勉強していたのは Framework 4.0 でした。T.T.それはすべて古い TMD テクノロジーとコードの山です
関連ラベル：
overlay
ソース：php.cn
前の記事：js jquery配列入門_javascriptスキル 次の記事：js ページ上の他の場所をクリックして、表示されている DIV_javascript スキルを非表示にします
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
クリック後画像を非表示にし、再度クリックすると画像を表示する方法はありますか？ オブジェクトに画像を重ねています。クリックして非表示にし、オブジェクト (360 度の仮想ツアー) を表示し、仮想ツアーをクリックするとまったく同じ画像を表示したいと考えています。...
から 2024-04-03 20:13:41
0
1
311
クリックした後に div の ID を URL に追加し、閉じるボタンをクリックした後に URL から削除します。 div の ID を URL に追加する部分は完了しましたが、クラスのスピーカー (このスピーカーでは overlay-close) の閉じるボタンをクリックした後、それを削除でき...
から 2024-04-01 11:46:38
0
2
328
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！