如何使用CSS或Javascript重新调整框大小

I found by browsing some pages source code that they resize a box using either CSS or Jquery. The code and files are very long so I thought if someone knows how to do this.

我发现通过浏览一些页面源代码,他们使用CSS或Jquery调整框大小。代码和文件很长,所以我想如果有人知道如何做到这一点。

What's it?

On images files, I find a box (designed with an editor), this box has a size of xxx X yyy. A way to use it on a division, is to use it as a background and then your division have the same look as this box, however it can't scale in size.

在图像文件上,我找到一个盒子(用编辑器设计),这个盒子的大小为xxx X yyy。在分区上使用它的一种方法是将它用作背景,然后你的分区看起来与这个盒子一样,但是它的大小不能缩放。

it seems that there's a solution to dynamically (most likely with JS) resize this box (may be by cropping the top, bottom, left and right) and then resizing it.

看起来动态(很可能是JS)的解决方案可以调整此框的大小(可以通过裁剪顶部,底部,左侧和右侧),然后调整大小。

Does anyone have an idea about this or a simple example/tutorial??

有没有人对此或一个简单的示例/教程有所了解?

2 个解决方案

#1

jQuery has a pretty rad UI, not sure if this is what you mean, but check out their easy demo here,

jQuery有一个漂亮的用户界面,不确定这是不是你的意思,但在这里查看他们的简单演示,

jQuery Resizeable

#2

The most basic way to resize an element is to change it's height property using a script.

调整元素大小的最基本方法是使用脚本更改其高度属性。

element.height = pixels;

You find the element through the Document Object Model (DOM) which is just an abstraction of a document's markup into objects for something like jscript, sometimes called javascript. An example on how to do this is given within the w3schools jscript tutorial:

您可以通过文档对象模型(DOM)找到元素,它只是将文档的标记抽象为jscript之类的对象,有时称为javascript。 w3schools jscript教程中给出了一个如何执行此操作的示例:

<html>
  <head>
    <script type="text/javascript">
      function changeSize() {
        document.getElementById("compman").height="250"
        document.getElementById("compman").width="300"
      }
    </script>
  </head>
  <body>

    <img id="compman" src="compman.gif" width="107" height="98" />
    <br /><br />
    <input type="button" onclick="changeSize()" value="Change size of image">

  </body>
</html>

If you want to do fancy transitions and animations then all you need is a bit of DOM and jscript knowledge and you can write your own. To get such fancies working smoothly on different browsers, however, you must first spend six months in a small cellar and a text editor without sunlight, food, water or soap.

如果你想做精美的过渡和动画,那么你需要的只是一些DOM和jscript知识,你可以编写自己的。然而,为了让这些幻想在不同的浏览器上顺利运行,你必须先在一个没有阳光,食物,水或肥皂的小酒窖和文本编辑器中度过六个月。

Most people choose to use someone else's sweat and use a library like jQuery instead. Once you have figured out how to change somethings height in plain jscript the jQuery documentation will make a lot more sense to you. jQuery isn't your only option either. There are loads of feature rich libraries. If it's just fancy doo-dah's your looking for, scriptaculous might take your fancy.

大多数人选择使用别人的汗水,而是使用像jQuery这样的库。一旦你弄清楚如何在普通的jscript中改变某些高度,jQuery文档对你来说会更有意义。 jQuery不是你唯一的选择。有大量功能丰富的库。如果它只是花哨的doo-dah是你的寻找,scriptaculous可能会让你喜欢。

Here's a function i once used to resize (or Morph in scriptaculous-speak) an element with the id attribute set to 'page-header':

这是我曾经用来调整大小(或者在scriptaculous中说话的Morph)一个id属性设置为'page-header'的元素的函数:

//used to control position/animation of the page header
var POS_UP = 1;
var POS_DOWN = 2;
var POS_DURATION = 1.0;
var POS_HEIGHT = {POS_UP:"180px;", POS_DOWN:"400px;"};

//the header effect can be referred to;
header_effect = null;

//header position is used as an index for POS_HEIGHT
var header_position = POS_UP;

/**************************************
*    headerScroll()                   *
*    Morphs the header's size         *
**************************************/
  function headerScroll() {
    header_position = (POS_UP+POS_DOWN) - header_position;
    header_effect = new Effect.Morph('page-header', {style: 'height:'+POS_HEIGHT[header_position], duration: POS_DURATION  });

  }

This resizes the element in a very smooth transition, allowing my <div id="page-header"> to expand and reveal hidden content. All you'd need to toggle up/down would be a <a onclick="headerScroll();">Toggle Up/Down</a> and we're away.

这会在非常平滑的过渡中调整元素的大小,允许我的

There's so much you can do very easily once you get started. Either way, it would be best to spend some time learning jscript and the basics of the HTML DOM before plunging in.

一旦你开始,你可以很容易地做到这一点。无论哪种方式,最好在插入之前花些时间学习jscript和HTML DOM的基础知识。

#1