JQ实现仿163头部广告的下拉效果，在FF下显示时有个跳动的过程
文章来源：365jz.com 点击数：791 更新时间：2009-09-19 10:22 参与评论
用jq实现的仿163首页头部广告的下拉效果：
下面是代码：
在ie6.0、FF和Opera浏览器进行测试的时候，就是FF浏览器在滑动到最底端时有个跳动的情况，待解决！
问题已经解决了～
只要给p定义样式：
div#ad p {height:25px; padding:0;margin:0;line-height:150%;}
这样在ie6.0、FF和Opera浏览器下显示效果一致；
FF下还有点小问题，在slideDown的时候有个很生硬的过程，好像卡住了一小会再下拉，这个问题还是待研究！
下面是代码：
<html>
<head>
<title>163头部ad显示效果</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<!--将jQuery引用进来-->
<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;}//这是第一次发布时候p的样式*/
div#ad p {height:25px; padding:0;margin:0;line-height:150%;}//这是第二次发布时候p的样式
</style>
</head>
<body>
<div id="ad">
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
</div>
</body>
</html>
<head>
<title>163头部ad显示效果</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<!--将jQuery引用进来-->
<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;}//这是第一次发布时候p的样式*/
div#ad p {height:25px; padding:0;margin:0;line-height:150%;}//这是第二次发布时候p的样式
</style>
</head>
<body>
<div id="ad">
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
</div>
</body>
</html>
在ie6.0、FF和Opera浏览器进行测试的时候，就是FF浏览器在滑动到最底端时有个跳动的情况，待解决！
问题已经解决了～
只要给p定义样式：
div#ad p {height:25px; padding:0;margin:0;line-height:150%;}
这样在ie6.0、FF和Opera浏览器下显示效果一致；
FF下还有点小问题，在slideDown的时候有个很生硬的过程，好像卡住了一小会再下拉，这个问题还是待研究！
Tag标签: js脚本
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
------分隔线----------------------------
