jquery は、Yahoo homepage_jquery のクリックダイアログボックス効果をシミュレートします。-jsチュートリアル-php.cn

jquery は、Yahoo homepage_jquery のクリックダイアログボックス効果をシミュレートします。

WBOY

リリース： 2016-05-16 18:29:57

オリジナル

1175 人が閲覧しました

ここで説明しておきますが、この種のエフェクトはスクリプトハウスからも同様のエフェクトがリリースされています。詳細については、スクリプトダウンロードセンターをご覧ください。

レンダリング:

jquery は、Yahoo homepage_jquery のクリックダイアログボックス効果をシミュレートします。

免責事項: 私が行ったのは、この効果を実現するためだけであり、Yahoo のホームページをそれほど美しくしたわけではありません。

原材料:

jquery は、Yahoo homepage_jquery のクリックダイアログボックス効果をシミュレートします。

もの:

1: 各 li タグに一時停止イベントを追加します

2: iframe を構築し、現在の li タグの下にある a 要素の href 属性値を取得します

3: iframe 要素を含む DIV を構築し、
HTML 構造を表示します:

コードをコピーコードは次のとおりです:

ニュース
体育

コードをコピーしますコードは次のとおりです。

ul{

float:left; 
ul li { 
display:block; 
margin-top:15px; 
position:relative; -装飾:なし; 
色:#8000ff; 
.show{ 
幅:640px; 
位置:絶対; 45px; 
左:30px; 
背景:url(1.gif) 繰り返しなし; 
パディング:45px 35px 40px; ; 
高さ: 22px; 
表示:ブロック; 
背景:url(2.gif) 繰り返しなし
.quick { 
位置:絶対; 
左:30px; 
背景:url(3.jpg) 繰り返しなし; 
高さ:26px; 
フォントサイズ:12px; 
行の高さ:26px; 

 
JS コード: 




コードをコピー 


 コードは次のとおりです: 

 
$( document).ready(function(){ 
$('ul li a').hover(function(e){ 
var Quickw=$(this).parent().parent().find(' #clickdiv'); 
if (quickw){ 
$('#clickdiv').remove(); 
$(this).parent().append('プレビュー< ;/div>'); 
$('#clickdiv').addClass('quick'); 
$("#clickdiv").click(function(){ 
$(this).css('display','none'); 