易栈网-膘叔（Neatstudio.COM）

易栈网-膘叔

imageworkshop中的position的说明及代码

CSS背景

日志分类

热门标签

日志归档

搜索文章

最新评论

博客信息

友情链接

position有9个点：lt,mt,rt,lm,mm,rm,lb,mb,rb，其实对应的是几个英文：lt(left top),mt(middle top),rt(right top)，以此类推

上官方原图：

OK，然后我们看一下他的代码是怎么写的，如果有人涉及到也可以借鉴：

PHP代码

<?php
/**
* Calculate the left top positions of a layer inside a parent layer container
* $position: http://phpimageworkshop.com/doc/22/corners-positions-schema-of-an-image.html
*
* @param integer $containerWidth
* @param integer $containerHeight
* @param integer $layerWidth
* @param integer $layerHeight
* @param integer $layerPositionX
* @param integer $layerPositionY
* @param string $position
*
* @return array
*/
public static function calculatePositions($containerWidth, $containerHeight, $layerWidth, $layerHeight, $layerPositionX, $layerPositionY, $position = 'LT')
{
$position = strtolower($position);
if ($position == 'rt') {
$layerPositionX = $containerWidth - $layerWidth - $layerPositionX;
} elseif ($position == 'lb') {
$layerPositionY = $containerHeight - $layerHeight - $layerPositionY;
} elseif ($position == 'rb') {
$layerPositionX = $containerWidth - $layerWidth - $layerPositionX;
$layerPositionY = $containerHeight - $layerHeight - $layerPositionY;
} elseif ($position == 'mm') {
$layerPositionX = (($containerWidth - $layerWidth) / 2) + $layerPositionX;
$layerPositionY = (($containerHeight - $layerHeight) / 2) + $layerPositionY;
} elseif ($position == 'mt') {
$layerPositionX = (($containerWidth - $layerWidth) / 2) + $layerPositionX;
} elseif ($position == 'mb') {
$layerPositionX = (($containerWidth - $layerWidth) / 2) + $layerPositionX;
$layerPositionY = $containerHeight - $layerHeight - $layerPositionY;
} elseif ($position == 'lm') {
$layerPositionY = (($containerHeight - $layerHeight) / 2) + $layerPositionY;
} elseif ($position == 'rm') {
$layerPositionX = $containerWidth - $layerWidth - $layerPositionX;
$layerPositionY = (($containerHeight - $layerHeight) / 2) + $layerPositionY;
}
return array(
'x' => $layerPositionX,
'y' => $layerPositionY,
);
}

END;

不多说啥了。在网上看到这篇文章，难得是有详细介绍的。。虽然这个功能我很多时候其实已经在用了，但。那都是直接拿来用的，并没有深刻的研究过。今天这里终于看到一个有注释的，就贴上来看看。

这种用法，是被YAHOO所推荐的。因为。这样的用法，降低了图片的下载量。而且并在一起，并不会给图片的大小增加很多。

原文：http://iruif.cn/swd/?p=25
这里只贴重要的内容。请原作者不要伤心。谢谢

图片文件为：

首先我们得控制好要应用小图标的对象的高度. 否则到时候这个图标就会显示异常了.

比如说我们要给 li 标签使用这个小东东, 那么我们就得写上这样的代码:

CSS代码

li {
height: 12px; /* 这个高度等于每个小图标的高度 */
line-height: 12px; /* 这个同上. 但只是有些时候需要写这个而已. */
background: url('icons.gif') 0 -12px; /* 这里的 -12px 就是定义你要使用第几个图标. 如果每个图标的高度都是 12px 的话, 那么我要使用第 N 个图标的话就得写 n*12 . */
padding-top: 0; /* 这个要严格限定为 0 . 否则呢, 哼哼哈莉.. */
padding-bottom: 0; /* 这个也一样.. */
padding-left: 14px; /* 这个肯定是要设定一个值的.. 否则小图标就会被文字覆盖掉.. padding-right 可以设定也可以不设定.. */
margin: 2px 0; /* 如果要设定每个 li 标签之间的距离话, 就要改这个了.. */
overflow: hidden; /* 在有些情况下需要写这个. 具体作用我就不多解释了. */
}

显然, 把小图标都放到一个文件里的话会带来很多的问题. 比如要限定宽度和高度 [也就是内容会显示不完整] , 并且 padding 也将无法使用 [也就是会影响到 border 等属性的效果] .
当然也有解决办法. 那就是 — 把每个小图标的距离拉开, 或者干脆把他们都拆成单独的文件..

如果不明白可以问问原作者。。。

« 2024年11月 »