Jquery は text_jquery 内の重要なキーワードを強調表示します

1. インターフェースのプレビュー

右側の Tab ボタンにマウスを置くと、テキストの透明度が下がり、テキストの一部が強調表示されます。その効果は次のとおりです。

デモのアドレス: http://5thirtyone.com/sandbox/samples/fadefocus/

なんと素晴らしい効果でしょう！

2. 実施原則

強調表示するテキストに 段落マークを追加し、マスク レイヤーとして class="mask" を指定した div を使用して、マスク レイヤーがテキスト コンテンツ (z-index 属性、 Jquery を使用してスタイル クラスを段落に動的に追加します
3. HTML コード

コードをコピー コード

• 概要


• アバター li>
  
• a class="d3" href="#">フォーマット

"コンテンツ">

アバター (2009 年の映画)

ジェームズ キャメロンのアバターとしても知られるアバターは、ジェームズ キャメロンのアバターとしても知られる、アメリカの 3D SF
大作映画であり、脚本と監督は
ジェームズ キャメロン、20 世紀フォックスによって 2009 年 12 月 16 日に公開された映画。
Lightstorm Entertainment が共同制作しており、パンドラ、
軌道を周回する架空の巨大ガス惑星の一つ、ポリフェモスの人類が住む壮大な紛争
Alpha Centauri A。
パンドラでは、人間の入植者とパンドラの感覚を持ったヒューマノイドの先住民である
ナヴィが、惑星の資源をめぐって戦争を繰り広げており、後者は引き続き戦争を続けている
この映画のタイトルは、
仮想世界における現実の人間を表現した

を指します。 p>
< ;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 により、

が左側のテキスト コンテンツをカバーします。
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