我创建画廊,我想在图片周围创建框架。
但这张图片必须是可扩展的。此帧的宽度和高度由图像的宽度和高度生成。
并且必须有可能通过 JavaScript 改变框架的高度。
谢谢。
PS:首先,我必须有可能通过JavaScript使框架变窄。
我创建画廊,我想在图片周围创建框架。
但这张图片必须是可扩展的。此帧的宽度和高度由图像的宽度和高度生成。
并且必须有可能通过 JavaScript 改变框架的高度。
谢谢。
PS:首先,我必须有可能通过JavaScript使框架变窄。
如果我是你,我会确保我可以重复使用(重复)图像,然后我会这样做:
<div id="frame">
<div id="top-left"></div>
<div id="top"></div>
<div id="top-right"></div>
<div id="left"></div>
<div id="imageSpace"></div>
<div id="right"></div>
<div id="bottom-left"></div>
<div id="bottom"></div>
<div id="bottom-right"></div>
</div>
其中: #top-left, #top-right, #bottom-left, #bottom-right
使用角落图像作为背景并同时设置width
和height
设置。
并且#top, #right, #bottom, #left
正在使用重复的图像作为他们的背景。
检查附加的图像,我将线条放置在您应该剪切原始帧图像的位置。
此方法将允许您更改#top / #bottom 和#left / #right 的宽度以增加框架的大小。
这可能很难实现。
如果您使用的是支持 CANVAS 的现代浏览器,请查看此演示,它可以满足您的需求: CANVAS 演示
否则,您将需要创建 8 个图像(4 个角和 4 个边),其中边的制作方式可以平铺以调整到您需要的任何大小。
下一个技巧是如何构建框架。您可以在图片周围手动创建 DIV/表格来创建这种效果,但这会非常庞大且不是很干净。您最好的选择是使用 jQuery(或您最喜欢的库)使用 CSS 类(例如“fancyFrame”)连接到页面上的所有图像,并根据需要使用 HTML 标记包装它们,该标记使用您在上面创建的图像通过 CSS。
您可以使用A List Apart 的投影技术,该技术使用 CSS 和 PNG 为图像创建可自动调整大小的投影。您可以修改技术以创建可调整大小的框架。
您将需要四个 div 和四个图像。角落需要以 45 度角切割并具有透明度:
用 Javascript 缩小框架是最简单的部分,真的。一旦你设置了 HTML/CSS 以便它已经可以缩放,你可以使用 Javascript 设置宽度,如下所示:
var photo = document.getElementById('photoFrame');
photo.width = '200px';
有趣的是,当我在 ImageKind.com 工作时,我不得不做这件事。作为参考,如果您去那里的框架店,例如这个,请转到第 4 步(添加垫子)并单击调整宽度,有一个滑块或多或少地执行您所描述的操作。
我最初有几个嵌套的 DIV,它们带有大的相对 L 形框架块作为背景图像。一个小小的 Firebug 检查表明他们已经把它改成了一张桌子。我敢肯定,效率更高,因为侧面可以平铺。