首页 > Web开发 > 详细

Js配合CSS实现的图片居中

时间:2015-03-12 23:57:58      阅读:397      评论:0      收藏:0      [点我收藏+]

CSS图上居中很好实现,但万恶的浏览器之间各不相让,搞的不兼容,还好我们有让其兼容的办法,那就是结合JS来实现,这样各个浏览器都听话多了。本例就是CSS结合JavaScript实现的图片垂直、水平方向都居中,也不是上下左右居中,位于网页的正中央,代码如下:

<body onresize="myLoad()" onload="myLoad()">
<div id="xuanma" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 0px"><img id="ximage" src="/jscss/demoimg/wall_s8.jpg"/></div>
<SCRIPT language="javascript" type=text/javascript>
function myLoad()
{
document.getElementById(‘xuanma‘).style.top= document.body.clientHeight/2-document.getElementById(‘ximage‘).height/2;
document.getElementById(‘xuanma‘).style.left= document.body.clientWidth/2-document.getElementById(‘ximage‘).width/2;
}
</SCRIPT>
</body>

复制代码保存成HTML页面,双击打开可测试效果。

Js配合CSS实现的图片居中

原文:http://www.cnblogs.com/phpfensi/p/4333846.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!