本文讲述的是如何在javascript中获得图片的边框。
我们有的时候载入一张图片,并且设置了边框,但是找图片上面的左边点,就必须通过margin的偏移来找到了,如何去找margin的偏移呢?
看下面的代码:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js"></script>
<script>
function setImage(obj){
var image = new Image();
image.src = obj.src;
var height = image.width;
var width = image.height;
alert("pic-height= "+height+"pic-width="+width);
var imageCorrdinate = [];
imageCorrdinate = new Array();
imageCorrdinate[0] = ($("div#").css("marginLeft"));
imageCorrdinate[1] = ($("div").css("marginTop"));
alert("marginLeft= "+imageCorrdinate[0]+"marginTop="+imageCorrdinate[1]);
var left = $("#droppable").offset().left;
var top = $("#droppable").offset().top;
alert("left= "+left+"right="+top);
var totalHeight = height + imageCorrdinate[1];
var totalWidth = width + imageCorrdinate[0];
alert("tatalheight= "+totalHeight+"totalwidth="+totalWidth);
}
</script>
</head>
<body>
<div id="droppable">
<img src="1.jpg" onload="setImage(this);">
</div>
<style>
#droppable {
width: 100%;
height: 100%;
float: left;
margin-left: 10%;
margin-top: 10%;
margin-bottom: 10%;
}
</style>
</body>
</html>
本人也是初学者,所以讲述一下基本的概念:
关于ccs margin的概念,可以查看http://www.w3school.com.cn/css/css_margin.asp,具体的内容baidu,google之。
文中ccs为
<style>
#droppable {
width: 100%;
height: 100%;
float: left;
margin-left: 10%;
margin-top: 10%;
margin-bottom: 10%;
}
</style>
我们主要是想获得margin-left 10%的值, 我这里开始弄错了,以为是图片的宽度,实际上不是,而是 div这个框体的宽度。
得到的结果是div 的长和宽都是133.3,所以也是按照133.3进行偏移的,你可以看到图片距离最上面的距离也是133.3*133.3.
但是我不是特别清楚div和图片自身大小的关系(应该是没关系的),如果有人知道做个补充,如果后面知道的话我也会写进来。
更新一下,这里div用的父页面的宽度,所以你会发现如果你放大页面,可能会有不一样的问题。
如何保持两个图片相对位置不变呢?使用固定的margin_left.
另外注意一点是
var totalHeight = height + imageCorrdinate[1];
var totalWidth = width + imageCorrdinate[0];
alert("tatalheight= "+totalHeight+"totalwidth="+totalWidth);
其实是有问题的,得不到你想要的结果,javascript是弱类型的,如果要进行计算必须使用parseInt 或者parseFloat才行。
只用转换一个变量就ok
var totalHeight = height + parseFloat(imageCorrdinate[1]);
var totalWidth = width + parseFloat(imageCorrdinate[0]);
alert("tatalheight= "+totalHeight+"totalwidth="+totalWidth);