码迷,mamicode.com
首页 > Web开发 > 详细

Js配合CSS实现的图片居中

时间:2015-03-12 23:58:09      阅读:382      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!