作者：狮子座YAO | 来源：互联网 | 2023-09-08 09:37
一、弹出层：需求：打开网页，先弹出一张图片，5秒钟之后自动关闭图片进入网页；用户也可以通过点击按钮来关闭图片进入网页；原理：通过不同层级定位的方式让弹出的图片显示在网页所有元素上面（也就是让这张推按覆
一、弹出层：
需求：打开网页，先弹出一张图片，5秒钟之后自动关闭图片进入网页；用户也可以通过点击按钮来关闭图片进入网页；
原理：通过不同层级定位的方式让弹出的图片显示在网页所有元素上面（也就是让这张推按覆盖在网页原先的元素上）。然后通过jquery或JS动作，设置图片定时隐藏。
代码：
<div id="pagephoto" style="opacity:0;filter:alpha(opacity=100);position:fixed;_position:absolute; left:0; top:0; right:0; bottom:0; z-index:9999; text-align:center;*height:expression(((document.documentElement.clientHeight>0)?document.documentElement.clientHeight:document.documentElement.clientHeight)+'px');*width:100%;_top:expression((document.documentElement.scrollTop-this.offsetHeight+this.offsetHeight)+'px');">
<div style="position:absolute; left:0; top:0; right:0; bottom:0; background:#000;" onClick="$('#pagephoto').slideUp('slow')">div>
<div style=" display:inline-block;*display:inline; width:1px; height:100%; margin:0 -0.5em 0 -1px; position:relative; vertical-align:middle;">div>
<a href="http://www.test.com/index.php/detail/cx-4/121#main" target="_blank"><img src="http://www.test.com/data/template/test/images/index/show_cx4.jpg" style="max-width:100%; max-height:100%; vertical-align:middle; position:relative;">a>
div>
<script>
$(function(){
setTimeout("$('#pagephoto').animate({opacity:'1'},'slow')",300);
setTimeout("$('#pagephoto').hide(function () { $('#pagephoto').animate({top:'-100%',opacity:'0'},'slow')})",5000);
});
script>
setTimeout：定时器.设定一个时间，然后关系相应的程序。
animate：动画
二、锚点
Demo:
$(function(){
if (window.location.hash=="#main") {
setTimeout("$('body').animate({'scrollTop':$('.m-global-container').offset().top},500);",1000);
//alert($("body").scrollTop());
};
});
京公网安备 11010802041100号