Jquery は text_jquery 内の重要なキーワードを強調表示します-jsチュートリアル-php.cn

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

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

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

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

2. 実施原則

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

コードをコピーコード

概要

アバター
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