图片在浏览器窗口水平居中的实例代码分享

来源：动视网责编：小采时间：2020-11-27 20:17:03

图片在浏览器窗口水平居中的实例代码分享

图片在浏览器窗口水平居中的实例代码分享:闲言碎语不多说，直接上代码，看看你能领悟到多少。<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片在浏览器窗口水平居中展示（图片尺寸不限制）</title> <

推荐度：

点击下载本文 文档为doc格式

导读图片在浏览器窗口水平居中的实例代码分享:闲言碎语不多说，直接上代码，看看你能领悟到多少。<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片在浏览器窗口水平居中展示（图片尺寸不限制）</title> <

闲言碎语不多说，直接上代码，看看你能领悟到多少。

<!DOCTYPE html>
<html>

 <head>
 <meta charset="utf-8" />
 <title>图片在浏览器窗口水平居中展示（图片尺寸不限制）</title>
 <style>
 * {
 margin: 0;
 padding: 0;
 background: #606060}
 
 html {
 height: 100%;
 }
 
 body {
 position: relative;
 min-height: 100%;
 }
 
 #img-center {
 width: 800px;
 margin: 0 auto;
 display: block;
 margin-top: 2%;
 margin-bottom: 2%;
 cursor: zoom-in;
 }</style>
 <script>window.onload = function() {/*小于浏览器屏幕时居中 */var docuH = document.body.clientHeight,
 domH = document.getElementById("img-center").offsetHeight,
 dom = document.getElementById("img-center");if(domH < docuH) {var csstext = "position:absolute;top:50%;margin-left:-400px;left:50%;margin-top:-" + domH / 2 + "px;";
 dom.style.cssText = csstext;
 }
 };/*滚动定位*/function bbimg(o) {var zoom = parseInt(o.style.zoom, 10) || 100;
 zoom += event.wheelDelta / 12;if(zoom > 0) o.style.zoom = zoom + '%';return false;
 }</script>
 </head>

 <body>
 <img src="img/3.jpg" alt="" id="img-center" onmousewheel="return bbimg(this)">
 </body>

</html>

图片在浏览器窗口水平居中的实例代码分享

推荐度：

点击下载本文 文档为doc格式

标签：图片居中窗口

热门焦点

图片在浏览器窗口水平居中的实例代码分享

图片在浏览器窗口水平居中的实例代码分享

图片在浏览器窗口水平居中的实例代码分享

最新推荐

猜你喜欢

热门推荐