电脑故障

位置:IT落伍者 >> 电脑故障 >> 浏览文章

浏览器打开层自动缓慢展开收缩实例代码


发布日期:2023/12/11
 
本文为大家介绍下层自动缓慢展开收缩在浏览器打开时是如何实现的主要用到了slideUp及slideDown等主要jquery方法感兴趣的朋友可以参考下哈希望对大家有所帮助

例子

复制代码 代码如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Strict//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>无标题文档</title>
<style>
#screefull{display:block; border:px solid #bddbf; width:px; padding:px px px; margin: auto px; background:#fefdb; }
#mostrar{display:block; width:px; display:none;}
#screefull aclose{ display:block; width:px; height:px; background:url(img/cxgif) norepeat ; overflow:hidden; float:right; margin:px px ; *marginright:px; textdecoration:none;}
#screefull p{ display:block; textalign:center; fontfamily:"Microsoft Yahei"; fontsize:px; color:#; height:px; lineheight:px; verticalalign:middle;}
#screefull var{ display:inlineblock; *display:inline; *zoom:; background:url(img/wicongif) norepeat ; width:px; height:px; overflow:hidden; verticalalign:middle; marginright:px;}
#screefull em{ display:inlineblock; *display:inline; *zoom:; color:#ff; fontfamily:"Microsoft Yahei"; fontstyle:normal;}
#screefull span{ display:inlineblock; *display:inline; *zoom:; verticalalign:middle;}
#screefull p a{ display:inlineblock; *display:inline; *zoom:; color:#ff; textdecoration:underline;}
</style>
<script type="text/javascript" src="js/jqueryjs"></script>
</head>
<body>
<!begin:>
<div id="warn" class="scree clearfix" style="display:none;">
<div id="screefull">
<a href="#" class="close" onclick="closewarn(close)">[x]</a>
<p><span> 在<em>未通过审核的网站</em>添加广告代码将不会产生佣金<a href="#" target="_blank" >我知道了</a></span></p>
</div>
</div>
<script type="text/javascript">
function closewarn(type)
{
$("#warn")slideUp("slow");
if(type == know)
{
$post(windowlocationhref{op : setwarn}function(data)
{
return true;
});
}
}
windowonload = function()
{
$("#warn")slideDown();
}
</script>
<!end:>
</body>
</html>


解释上面代码段
$("#warn")slideUp("slow");向上滑动 $("#warn")slideDown();向下滑动
$post(windowlocationhref{op : setwarn}function(data)
{
return true;
})
运用到了ajax 提交 跟服务器进行交互
第一个参数是请求的地址 第二个是提交的参数 第三个是请求成功 之后调用的方法
参数op 的值是setwarn json串的格式具体运用解说看
url 对应 locaotionhref(取得是当前页面的地址)
data对应 {opsetwarn} 字符串
success 对应 函数

windowonload = function(){}作用一般在<text/javascript>中写的函数都要在body页面中调用用此函数就不用等着body页面中调用就可以执行了

上一篇:批量实现面向对象的实例代码

下一篇:特酷消隐字体