页面滚动时div窗口始终居中

最新推荐文章于 2022-12-23 15:23:29 发布
最新推荐文章于 2022-12-23 15:23:29 发布
阅读量790 收藏
点赞数
文章标签： java
原文链接：http://www.cnblogs.com/liwentao/p/7124207.html
版权

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/JavaScript">
        function fn1() {
            var _div = document.getElementById("div1");
            fnShowDiv(_div);
        }
        //显示指定DIV 
        function fnShowDiv(_div) {
            var iWidth = document.documentElement.clientWidth;
            var iHeight = document.documentElement.clientHeight + document.documentElement.scrollTop * 2;
            var h = 70; //div 高
            var w = 260; //div 宽

            _div.style.top = (iHeight - h) / 2 + "px";
            _div.style.left = (iWidth - w) / 2 + "px";
            _div.style.display = "block";
            _div.style.position = "absolute";
            _div.style.width = w + "px";
            _div.style.height = h + "px";
            _div.style.textAlign = "center";
            _div.style.margin = "0 auto";
            _div.style.background = "red";
            
        }
    </script>
</head>
<body>
<div id="div1" style=""></div>
<input type="button" id="btn1" style=" margin:700px auto" value="测试" οnclick="fn1()" />
</body>
</html>

转载于:https://www.cnblogs.com/liwentao/p/7124207.html

weixin_30258901
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
怎么让html滚动字幕居中,CSS设置DIV窗口上下居中无滚动条
weixin_29163581的博客
05-30 1425
前端开发中，免不了居中的需求。对于居中有很多方法，本次介绍一个不用js获取窗口，纯css给div“肉眼上的”上下左右居中，并且没有滚动条的实例。为什么说是“肉眼上的”，可以看看下面的介绍。话不多说，先来感受一下！！！点击图片跳转通过上面一个案例，可以看到无论怎样调整游览器窗口的大小，都不会出现滚动条，div始终在中间。div宽度大于窗口会被隐藏掉如何实现？上面的案例就是利用了CSS的 vertic...
css 相对浏览器动态居中永远保持在屏幕正中
09-25
本例为大家介绍的这个方法可以使div永远保持在屏幕正中，实现的方法或许有很多，但本例的方法可以永远保持在屏幕正中
让div在页面居中（滚动条滚动时也居中）
稻花香的博客
12-23 1127
【代码】让div在页面居中（滚动条滚动时也居中）
使div或img在滚动条滚动时，始终居中在屏幕中间
Love_云宝儿的博客
09-28 2607
直接上代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="format-detection" content="telphone=no, email=no"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,
随滚动条滚动的居中div
weixin_33834628的博客
11-29 307
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 遨游、火狐浏览器就用...
JS弹出居中的DIV的代码
01-19
首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义 document.body.... document.body.scrollTop（网页被卷去的高）：是指拉动垂直滚动条时网页上面被地址栏及菜单栏遮盖着的部分的高。 document.body.scroll
jQuery实现弹出窗口弹出div层的实例代码
01-21
无论是改变浏览器窗口大小还是下拉滚动条，这个弹出层都能始终保持居中；点击页面的关闭按钮，弹出层消失，页面恢复原样。 这里借鉴之前的一篇文章《基于jQuery的固定飘浮层》，使弹出窗口可以始终固定在浏览器的正...
div或img图片高度随宽度自适应的方法
12-28
该方法主要用来做网站自适应的，同时可以实现撑起内容高度，避免图片加载后导致的页面滚动。 一、可以使用js判断图片的宽度得到具体数值之后，再来利用js设置图片的高度（这里就不具体为大家细说了）。 利用js来实现...
jQuery 弹出层 浮动遮罩层 提示框 并随页面滚动而滚动
04-18
如：我想要<div id="ok">这里是弹出浮动遮罩层</div> 并随页面滚动而滚动 只要调用 $('#ok').showModel();这个方法就可以了 调用$('#ok').closeModel();就可以关闭层了 这个插件还有个好处是自动隐藏select控件，...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
1.jquery+div随屏幕滚动特效(支持设置参数滚动) 2.jQuery字符插件之适合留言板的jquery文本框输入字符限制插件下载 3.jquery实现Tooltip提示(文字、链接、地图锚点),自带5种不同样式 4.jQuery实现支付宝隐藏...
弹窗居中，不会随页面滚动变化，直接固定在屏幕中央
weixin_30325793的博客
08-09 961
定位top为50%；left为50%； 然后使用transifrom transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); 这样弹窗就可以居中，不会随着页面的滚动而变化直接固定在屏幕中央的 转载于:https://www.cnblogs.com/weisuoyuwei/p...
弹出层居中，滚动条滚动始终在屏幕中间
williamzhengguohui的专栏
12-31 1954
<br /><script type="text/javascript">var docEle =function() { return document.getElementById(arguments[0]) ||false; } function openNewDiv(_id) { var m ="mask"; if (docEle(_id)) document.body.removeChild(docE
浏览器之间的兼容问题，要求兼容到ie9+ ie浏览器滑动时候页面抖动解决方案
sdfujichao的博客
12-17 1618
一般的官网项目选择jQuery会比vue好一些。jQuery是多页应用，vue是单页应用对搜索引擎的支持不好。 但是官网一般的要求是ie9+，国产浏览器，谷歌和火狐更不用说了。 这样就出现了浏览器的兼容问题。主要有两个方面，1： 国产浏览器，2：ie浏览器。 解决办法 1：对国产浏览器的兼容问题比较容易，因为一般国产浏览器都是同时具有ie内核和谷歌内核的。可以在head中添加一下几行，强制国...
纯css居中弹出层 随滚动条居中
rinima6114的专栏
12-27 3351
本文只对css新手普及基本知识，高手飘过。 另，本文只说明弹出层如何固定居中在屏幕正中，并且随滚动条移动始终居中。 弹出、关闭事件简单，请自行解决。 下面开始正文，请先看图，如何让一个宽度 400px的弹出窗口居中，这次首先要用到一个很基础的常识 left ,top,width,height等的标示方法，可以是 auto 默认值。浏览器可计算出实际的宽
jquery 实现div随滚动条垂直居中
kevin
03-24 3199
$(function(){ $("#upload_bg_{$app_id}").css("top",($(window).height() - $('#upload_bg_{$app_id}').outerHeight())/2 + $(document).scrollTop()); }); left: ($(window).width() - $('.className').outerWi
function previewImage(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { var img = document.createElement("img"); img.src = e.target.result; img.alt = "照片"; img.onclick = function () { showPopup(img.src); }; // 隐藏原始的input元素 input.style.display = "none"; // 添加图片到input元素的父节点 input.parentNode.appendChild(img); }; reader.readAsDataURL(input.files[0]); } } function showPopup(imageSrc) { var popup = document.createElement("div"); var popupImg = document.createElement("img"); var scale = 1; // 设置弹出窗口中的图片 popupImg.src = imageSrc; popupImg.style.transform = `scale(${scale})`; // 设置悬浮窗样式 popup.style.position = "fixed"; popup.style.top = "10%"; popup.style.left = "10%"; popup.style.width = "80%"; popup.style.height = "80%"; popup.style.backgroundColor = "transparent"; popup.style.zIndex = "9999"; // 添加图片到悬浮窗 popup.appendChild(popupImg); document.body.appendChild(popup); // 居中弹出窗口 function centerPopup() { var windowHeight = window.innerHeight; var popupHeight = popup.offsetHeight; // 计算弹出窗口的垂直偏移量 var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var offset = (windowHeight - popupHeight) / 2 + scrollTop; // 设置弹出窗口的垂直位置 popup.style.top = offset + "px"; } // 初始化居中弹出窗口 centerPopup(); // 添加滚动和调整窗口大小事件监听器 window.addEventListener("scroll", centerPopup); window.addEventListener("resize", centerPopup); // 添加点击事件监听器，点击其他区域时隐藏弹出窗口 popup.onclick = function () { popup.style.display = "none"; } // 移除滚动和调整窗口大小事件监听器 function removeListeners() { window.removeEventListener("scroll", centerPopup); window.removeEventListener("resize", centerPopup); } // 在窗口关闭时移除事件监听器 window.onbeforeunload = function () { removeListeners(); };我在添加图片后需要图片始终显示在当前页面中间位置，并且能够随着滚动条滑动，始终在当前页面中间显示
最新发布
07-13
通过将`centerPopup`函数提取出来，并在滚动、调整窗口大小以及图片点击事件中重新计算并设置弹出窗口的位置，您可以实现图片始终显示在当前页面中间位置，并且能够随着滚动条滑动而保持在中间位置。 希望这对您...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值