jquery 模擬雅虎首頁的點(diǎn)擊對話框效果
更新時間：2010年04月11日 18:41:55 作者：
jquery模擬雅虎首頁的點(diǎn)擊對話框效果實(shí)現(xiàn)代碼，喜歡的朋友可以參考下。
這里說明下，這樣的效果腳本之家發(fā)過類似的效果。具體的可以到腳本下載中心查找。
<ul>
<Li><a >新聞</a></Li>
<li><a >體育</a></li>
<li><a >娛樂</a></li>
</ul>
CSS樣式：
ul{
float:left;
}
ul li{
display:block;
margin-top:15px;
width:100px;
position:relative;
}
a{
text-decoration:none;
color:#8000ff;
}
.show{
width:640px;
height:506px;
position:absolute;
top:-45px;
left:30px;
background:url(1.gif) no-repeat;
padding:45px 20px 35px 40px;
}
.close{
width:22px;
height:22px;
float:right;
display:block;
margin-top:-30px;
background:url(2.gif) no-repeat;
}
.quick{
position:absolute;
top:0px;
left:30px;
background:url(3.jpg) no-repeat;
width:37px;
height:26px;
font-size:12px;
color:white;
line-height:26px;
text-align:center;
}
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 id="clickdiv">預(yù)覽</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("<div id='window'><div id='closebutton'><a href='#'></a></div><iframe frameborder='0' hspace='0' src='"+url+"' style='width:640px;height:506px;'></iframe></div>")
.fadeIn('slow');
$("ul li #window").addClass('show');
$('#closebutton a').addClass('close');
$('#closebutton a').click(function(){
$("ul li #window").remove();
});
}
});
效果圖：
聲明：我做的只是實(shí)現(xiàn)這個效果，在美觀上并沒有做到y(tǒng)ahoo主頁這么好看，所以不要介意！
原材料：
思路：
1：為每一個li標(biāo)簽添加懸浮事件
2：構(gòu)建iframe并獲取到當(dāng)前l(fā)i標(biāo)簽下的a元素的href屬性值
3：構(gòu)建DIV包含iframe元素并顯示
HTML結(jié)構(gòu)：
復(fù)制代碼 代碼如下:
<ul>
<Li><a >新聞</a></Li>
<li><a >體育</a></li>
<li><a >娛樂</a></li>
</ul>
CSS樣式：
復(fù)制代碼 代碼如下:
ul{
float:left;
}
ul li{
display:block;
margin-top:15px;
width:100px;
position:relative;
}
a{
text-decoration:none;
color:#8000ff;
}
.show{
width:640px;
height:506px;
position:absolute;
top:-45px;
left:30px;
background:url(1.gif) no-repeat;
padding:45px 20px 35px 40px;
}
.close{
width:22px;
height:22px;
float:right;
display:block;
margin-top:-30px;
background:url(2.gif) no-repeat;
}
.quick{
position:absolute;
top:0px;
left:30px;
background:url(3.jpg) no-repeat;
width:37px;
height:26px;
font-size:12px;
color:white;
line-height:26px;
text-align:center;
}
JS代碼：
復(fù)制代碼 代碼如下:
$(document).ready(function(){
$('ul li a').hover(function(e){
var quickw=$(this).parent().parent().find('#clickdiv');
if(quickw){
$('#clickdiv').remove();
}
$(this).parent().append('<div id="clickdiv">預(yù)覽</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("<div id='window'><div id='closebutton'><a href='#'></a></div><iframe frameborder='0' hspace='0' src='"+url+"' style='width:640px;height:506px;'></iframe></div>")
.fadeIn('slow');
$("ul li #window").addClass('show');
$('#closebutton a').addClass('close');
$('#closebutton a').click(function(){
$("ul li #window").remove();
});
}
});
相關(guān)文章
本節(jié)主要介紹了用Jquery選擇器計算table中的某一列某一行的合計,需要的朋友可以參考下2014-08-08
jQuery獲取table下某一行某一列的值實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery獲取table下某一行某一列的值實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04
jQuery插件ImgAreaSelect實(shí)現(xiàn)頭像上傳預(yù)覽和裁剪功能實(shí)例講解一
這篇文章主要介紹了jQuery插件ImgAreaSelect實(shí)現(xiàn)頭像上傳預(yù)覽和裁剪功能實(shí)例講解一,需要的朋友可以參考下2017-05-05
jQuery選擇器源碼解讀（八）：addCombinator函數(shù)
這篇文章主要介紹了jQuery選擇器源碼解讀（八）：addCombinator函數(shù),本文用詳細(xì)的注釋解讀了addCombinator函數(shù)的實(shí)現(xiàn)源碼,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jQuery替換textarea中換行的方法,涉及jQuery操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2015-06-06
jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過購物車出現(xiàn)下拉框代碼(推薦)
在做web前端項(xiàng)目開發(fā)的時候，使用jquery庫的感觸頗多，下面小編通過寫購物車的下拉框做法，把我的想法給大家分享一下，感興趣的朋友可以參考下2016-07-07
解決 PHP 拼數(shù)據(jù)這方面的問題而有了 Smarty 這些模版，JavaScript 也可以利用模版來解決這些問題，比如基于 jQuery 的 jquery.tmpl2014-08-08
基于jquery的點(diǎn)擊鏈接插入鏈接內(nèi)容的代碼
基于jquery的點(diǎn)擊鏈接插入鏈接內(nèi)容的代碼，感覺有bug，解決的朋友可以留言方便更多的朋友2012-07-07
jQuery 常見學(xué)習(xí)網(wǎng)站與參考書
打算學(xué)習(xí)jquery的朋友可以參下如下網(wǎng)上，參考書嗎，可以看下 鋒利的jquery腳本之家提供電子版下載。2009-11-11
jquery實(shí)現(xiàn)觸發(fā)時更新下拉列表內(nèi)容的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)觸發(fā)時更新下拉列表內(nèi)容的方法,涉及jQuery使用ajax交互實(shí)現(xiàn)動態(tài)更新的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12