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

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

レンダリング:

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

原材料:

もの:

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

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

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

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

• ニュース
  
• 体育
;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>

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

}); 🎜>});

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。