需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。
2、在index.html中的<body>标签中，输入html代码：
reset()
window.onresize = function () {
reset()
}
function reset() {
var left = (window.innerWidth - $('div').width())/2
var top = (window.innerHeight - $('div').height())/2
$('div').css('margin-left', left + 'px')
$('div').css('margin-top', top + 'px')
}
3、浏览器运行index.html页面，此时无论怎么拉伸窗口，div都会自动调整到屏幕正中央。
如果页面不够长（至少窗口长度两倍），那肯定滚动不到一半的位置。否则任何浏览器都不会产生误差。下面的例子输出 100 个 <p>，页面加载的时候会滚动到第 51 个 <p>。<script type="text/javascript">window.onload = function() {// 测试：100 个 <p>足够使 scroll 长度大于 window 长度两倍for(var i = 1i <= 100i++) {document.body.innerHTML += "<p>" + i + "</p>" }document.documentElement.scrollTop = 0!function scrollToMiddle() {var scroll_height = 20,body = document.body,html = document.documentElement,mid = parseInt(Math.max(body.scrollHeight,body.offsetHeight,html.clientHeight,html.scrollHeight,html.offsetHeight) / 2)var interval_scroll = setInterval(function() {if(html.scrollTop + scroll_height >= mid) {clearInterval(interval_scroll) html.scrollTop = mid }else {html.scrollTop += scroll_height }}, 10) }()}</script>通过fixed定位实现, ".mask-box" 模拟背景,".dialog-box"作为d窗容器，里面写d窗的内容。2.
通过控制样式，切换 display:blockdisplay: none实现点击出现、点击关闭d窗。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）