您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > JQ實(shí)現(xiàn)仿163頭部廣告的下拉效果，在FF下顯示時(shí)有個(gè)跳動(dòng)的過(guò)程
JQ實(shí)現(xiàn)仿163頭部廣告的下拉效果，在FF下顯示時(shí)有個(gè)跳動(dòng)的過(guò)程
文章來(lái)源：365jz.com 點(diǎn)擊數(shù)：799 更新時(shí)間：2009-09-19 10:22 參與評(píng)論
用jq實(shí)現(xiàn)的仿163首頁(yè)頭部廣告的下拉效果：
下面是代碼：
在ie6.0、FF和Opera瀏覽器進(jìn)行測(cè)試的時(shí)候，就是FF瀏覽器在滑動(dòng)到最底端時(shí)有個(gè)跳動(dòng)的情況，待解決！
問(wèn)題已經(jīng)解決了～
只要給p定義樣式：
div#ad p {height:25px; padding:0;margin:0;line-height:150%;}
這樣在ie6.0、FF和Opera瀏覽器下顯示效果一致；
FF下還有點(diǎn)小問(wèn)題，在slideDown的時(shí)候有個(gè)很生硬的過(guò)程，好像卡住了一小會(huì)再下拉，這個(gè)問(wèn)題還是待研究！
下面是代碼：
<html>
<head>
<title>163頭部ad顯示效果</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<!--將jQuery引用進(jìn)來(lái)-->
<script>
$(document).ready(function() {
$("#ad").slideDown(1000,function(){
var dom = $(this);
setTimeout(function(){dom.slideUp(1000);},2000);
});});
</script>
<style type="text/css">
body {margin:0;padding:0;}
div#ad {width:500px;height:400px;font-size:18px; padding:0; margin:0; background-color:#eee; display:none;}
/*div#ad p {height:14px;}//這是第一次發(fā)布時(shí)候p的樣式*/
div#ad p {height:25px; padding:0;margin:0;line-height:150%;}//這是第二次發(fā)布時(shí)候p的樣式
</style>
</head>
<body>
<div id="ad">
<p>這是網(wǎng)易163的廣告代碼</p>
<p>這是網(wǎng)易163的廣告代碼</p>
<p>這是網(wǎng)易163的廣告代碼</p>
<p>這是網(wǎng)易163的廣告代碼</p>
<p>這是網(wǎng)易163的廣告代碼</p>
<p>這是網(wǎng)易163的廣告代碼</p>
<p>這是網(wǎng)易163的廣告代碼</p>
<p>這是網(wǎng)易163的廣告代碼</p>
</div>
</body>
</html>
<head>
<title>163頭部ad顯示效果</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<!--將jQuery引用進(jìn)來(lái)-->
<script>
$(document).ready(function() {
$("#ad").slideDown(1000,function(){
var dom = $(this);
setTimeout(function(){dom.slideUp(1000);},2000);
});});
</script>
<style type="text/css">
body {margin:0;padding:0;}
div#ad {width:500px;height:400px;font-size:18px; padding:0; margin:0; background-color:#eee; display:none;}
/*div#ad p {height:14px;}//這是第一次發(fā)布時(shí)候p的樣式*/
div#ad p {height:25px; padding:0;margin:0;line-height:150%;}//這是第二次發(fā)布時(shí)候p的樣式
</style>
</head>
<body>
<div id="ad">
<p>這是網(wǎng)易163的廣告代碼</p>
<p>這是網(wǎng)易163的廣告代碼</p>
<p>這是網(wǎng)易163的廣告代碼</p>
<p>這是網(wǎng)易163的廣告代碼</p>
<p>這是網(wǎng)易163的廣告代碼</p>
<p>這是網(wǎng)易163的廣告代碼</p>
<p>這是網(wǎng)易163的廣告代碼</p>
<p>這是網(wǎng)易163的廣告代碼</p>
</div>
</body>
</html>
在ie6.0、FF和Opera瀏覽器進(jìn)行測(cè)試的時(shí)候，就是FF瀏覽器在滑動(dòng)到最底端時(shí)有個(gè)跳動(dòng)的情況，待解決！
問(wèn)題已經(jīng)解決了～
只要給p定義樣式：
div#ad p {height:25px; padding:0;margin:0;line-height:150%;}
這樣在ie6.0、FF和Opera瀏覽器下顯示效果一致；
FF下還有點(diǎn)小問(wèn)題，在slideDown的時(shí)候有個(gè)很生硬的過(guò)程，好像卡住了一小會(huì)再下拉，這個(gè)問(wèn)題還是待研究！
Tag標(biāo)簽: js腳本
如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會(huì)為你解答?。?點(diǎn)擊進(jìn)入論壇
您可能感興趣的文章:
------分隔線----------------------------
