图片在浏览器窗口水平居中的实例代码分享
程序员文章站
2022-05-05 09:48:13
...
闲言碎语不多说,直接上代码,看看你能领悟到多少。
<!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>
以上就是图片在浏览器窗口水平居中的实例代码分享的详细内容,更多请关注其它相关文章!