ホームページ >ウェブフロントエンド >jsチュートリアル >Jquery は text_jquery 内の重要なキーワードを強調表示します
Jquery は text_jquery 内の重要なキーワードを強調表示します
- WBOYオリジナル
- 2016-05-16 18:38:171230ブラウズ
1. インターフェースのプレビュー
右側の Tab ボタンにマウスを置くと、テキストの透明度が下がり、テキストの一部が強調表示されます。その効果は次のとおりです。
デモのアドレス: http://5thirtyone.com/sandbox/samples/fadefocus/
なんと素晴らしい効果でしょう！
2. 実施原則
強調表示するテキストに 段落マークを追加し、マスク レイヤーとして class="mask" を指定した div を使用して、マスク レイヤーがテキスト コンテンツ (z-index 属性、 Jquery を使用してスタイル クラスを段落に動的に追加します
3. HTML コード
コードをコピー コード
"コンテンツ">
アバター (2009 年の映画)
ジェームズ キャメロンのアバターとしても知られるアバターは、ジェームズ キャメロンのアバターとしても知られる、アメリカの 3D SF
大作映画であり、脚本と監督は
ジェームズ キャメロン、20 世紀フォックスによって 2009 年 12 月 16 日に公開された映画。
Lightstorm Entertainment が共同制作しており、パンドラ、
軌道を周回する架空の巨大ガス惑星の一つ、ポリフェモスの人類が住む壮大な紛争
Alpha Centauri A。
パンドラでは、人間の入植者とパンドラの感覚を持ったヒューマノイドの先住民である
ナヴィが、惑星の資源をめぐって戦争を繰り広げており、後者は引き続き戦争を続けている
この映画のタイトルは、
仮想世界における現実の人間を表現した
< ;span class="d3">この映画は 2D および 3D フォーマットで公開され、
IMAX 3D も一部の劇場で公開されました。この映画は画期的なものとして宣伝されています。
映画制作用に特別に設計されたカメラを使用した 3D 表示と立体視
映画制作技術の観点から。
続きを読むオリジナルの
アバターに関する Wikipedia ページ
タブが表示されます。エンティティ結果クラス Buttons の各ボタンは、左側のテキストの透明度と段落テキストの強調表示を制御します。
エンティティ ソース クラスには 3 つの段落スパン Calss、つまり d1 d2 d3 があり、これらは強調表示されたテキスト段落です。
class="mask" の空の div が最後に配置されます。この Div もマスクレイヤーです。
4. CSS キーコード
コードをコピーします
コードは次のとおりです:
。エンティティソース、.entity-source span.show { 位置: 相対; .entity-source .mask {
表示: なし; : 絶対; 上: 0;
高さ: 100%;
}
。エンティティ ソース スパン
{
z-index: 2;
}
.entity-source span.show
{
背景: #ffc; ;
}
マスク クラスの z-index:1 により、
高さ: 100%;
}
。エンティティ ソース スパン
{
z-index: 2;
}
.entity-source span.show
{
背景: #ffc; ;
}
マスク クラスの z-index:1 により、
が左側のテキスト コンテンツをカバーします。
z-nidex: 2 は、スパン段落が
z-nidex: 2 は、スパン段落が
をカバーするようにします。したがって、ディスプレイは段落テキストの強調表示を実現します。
5. JQuery コード
jQuery( document).ready(function($) {
// マスク ソースはマスクのアニメーション効果を制御します
var MaskSource = jQuery('.mask');
jQuery('.entity-results')。 hover(function( ) {
maskSource.animate({opacity:0.7},1).fadeIn('750');
}, function() {
maskSource.fadeOut('1000');
} );
// カーソル コントロールの強調表示
var sample1 = jQuery('span.d1');
var sample2 = jQuery('span.d2'); sample3 = jQuery('span.d3');
jQuery('a.d1').hover(function() {
sample1.addClass('show'); //段落にクラスを追加します
} , function() {
sample1.removeClass('show') //段落クラスを削除します
}); 🎜>sample2.addClass('show');
}, function() {
sample2.removeClass('show');
jQuery('a.d3'); hover( function() {
sample3.addClass('show');
}, function() {
sample3.removeClass('show');
}); ;
アニメーション関数 animate(params, [duration], [easing], [callback])
Params: アニメーション属性および最終値としてのスタイル属性とその値のセット
duration (オプション): あらかじめ決められた速度 (「遅い」、「標準」、または「速い」) のいずれかの文字列、またはアニメーションの継続時間を表すミリ秒の値 (1000 など)
イージング (オプション) :使用する消去エフェクトの名前 (プラグインのサポートが必要)。デフォルトでは、jQuery は「linear」と「swing」を提供します。コールバック (オプション): アニメーションの完了時に実行される関数です。
FadeInエフェクト関数: fadeIn (speed, [callback])
速度: 3 つの所定の速度 (「遅い」、「標準」、または「速い」) のいずれかの文字列、またはアニメーションの継続時間を表すミリ秒の値 (例: 1000)
コールバック (オプション): (オプション) アニメーションが完了したときに実行される関数
フェードアウト効果関数: fadeOut の説明は fadeIn と同じ
デモ アドレス:
http://demo. jb51.net/html/fadefocus/index.html
パッケージのダウンロード アドレス:
http://xiazai.jb51.net/200912/yuanma/fadefocus.rar
5. JQuery コード
コードをコピーします コードは次のとおりです。
jQuery( document).ready(function($) {
// マスク ソースはマスクのアニメーション効果を制御します
var MaskSource = jQuery('.mask');
jQuery('.entity-results')。 hover(function( ) {
maskSource.animate({opacity:0.7},1).fadeIn('750');
}, function() {
maskSource.fadeOut('1000');
} );
// カーソル コントロールの強調表示
var sample1 = jQuery('span.d1');
var sample2 = jQuery('span.d2'); sample3 = jQuery('span.d3');
jQuery('a.d1').hover(function() {
sample1.addClass('show'); //段落にクラスを追加します
} , function() {
sample1.removeClass('show') //段落クラスを削除します
}); 🎜>sample2.addClass('show');
}, function() {
sample2.removeClass('show');
jQuery('a.d3'); hover( function() {
sample3.addClass('show');
}, function() {
sample3.removeClass('show');
}); ;
アニメーション関数 animate(params, [duration], [easing], [callback])
Params: アニメーション属性および最終値としてのスタイル属性とその値のセット
duration (オプション): あらかじめ決められた速度 (「遅い」、「標準」、または「速い」) のいずれかの文字列、またはアニメーションの継続時間を表すミリ秒の値 (1000 など)
イージング (オプション) :使用する消去エフェクトの名前 (プラグインのサポートが必要)。デフォルトでは、jQuery は「linear」と「swing」を提供します。
FadeInエフェクト関数: fadeIn (speed, [callback])
速度: 3 つの所定の速度 (「遅い」、「標準」、または「速い」) のいずれかの文字列、またはアニメーションの継続時間を表すミリ秒の値 (例: 1000)
コールバック (オプション): (オプション) アニメーションが完了したときに実行される関数
フェードアウト効果関数: fadeOut の説明は fadeIn と同じ
デモ アドレス:
http://demo. jb51.net/html/fadefocus/index.html
パッケージのダウンロード アドレス:
http://xiazai.jb51.net/200912/yuanma/fadefocus.rar
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。