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

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

レンダリング:

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

原材料:

もの:

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

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

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

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

• ニュース> ; Li>
  
• 体育
;a href= "http://www.sina.com">エンターテイメント


CSS スタイル:

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

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');

var url=$(this).parent().find('a').attr('href'); >var $basediv=$(this ).parent().parent().find('#window');
if($basediv){
$('#window').remove();

$(this).parent() .append("

/a>

div>") .fadeIn('slow'); $("ul li #window").addClass('show'); $('#closebutton a').addClass('閉じる'); $ ('#closebutton a').click(function(){ $("ul li #window").remove();

}); 🎜>});