|
动态改变图片尺寸（一）
| [日期：2000-10-13] |
来源：yesky 作者：耗子 |
[字体：大 中 小]
|
∠人得鳎馐且桓隹玟榔鞯氖纠憧梢园阉糜贜etScape和IE中。
好了，我们言归正传。我们都知道，在IE中，我们可以存取、控制、改变其中的任何元件。我们把这叫做DOM，即文件对像模型（Document Object
Model）。这些动作会让我们的整个HTML页面伸缩。例如，我们改变页面中的一个图片的尺寸，图片周围的文字会随之改变排列方式。NetScape则不然，它只有很多限制，只允许你操纵一些HTML元件，并且这些元件的改变不会改变它周围的布局。于是，我们用绝对坐标，来实现跨浏览器这一功能的解决方案。
而改变图片尺寸，在Netscape中是不允许的直接改变其大小的，因此，我们必须用别的方法来实现，考虑到整个程序的可扩充性，我们引入一个有绝对位置的容器元件（如：DIV等），再把我们的图片放在里面就行了。
下面，我们给出如何IE和Netscape中定义这个有绝对位置的图片的描述：
$#@60;DIV id="zoom" style="height:88; width: 31; top: 10; left: 10; position:
absolute">
$#@60;IMG src="http://soft.yesky.com/SoftChannel/72351167954485248/20001013/logo.gif" border=0 height=88 width=31>
$#@60;/DIV>
这里，DIV的高（height）和宽（width）和 图片的高和宽应该是一样，这是一个初始化的设置。
要对图片的大小进行处理，我写了sizeTo()函数，这是一个JavaScript的函数。这个函数可以自动识别用户端浏览器。如果是IE，它会直接地去改变图片的长和宽，但如果是Netscape，就不能通过改变图片的长和宽来实现这一效果了。只能是在DIV中建立一个有新的长度和宽度的新图片，说穿了，就是把DIV中的图片破坏（Destory）掉，然后再新建（Creat）一个。
这个sizeTo()的函数还支持有动感的放大和缩小一张图片，这个效果很简单，我编写的这个程序也很粗糙，在运动过程中它不会按比例地改变图片的大小，而是先变化图片的高，然后再变化图片的长度，但最后停止的时候，它会让整个图片的大小和设定成的一样。这点，你可以在后面的示例中看到演示。当然如果是一个没有动感的缩放，则就不会出现这个问题了。在Netscape中，你会发现，在第一次装载页面以后，它工作地也很流畅，而在IE中就更流畅了。好了，让我们来看一下sizeTo()函数中的五的参数：
sizeTo(divName,imagePath,newWidth,newHeight,Animate)
divName就是DIV元件的ID名字。
imagePath则是图片文件的路径名。
newWidth和newHeig 蚴且淹计某啥嗌俚目矶群统た怼?br>
Animate有两个值，true和false，true代表动画缩放，而false则表示缩放不要动画。
|
|
网页制作
BK网络学院主要内容：平面设计教程,网站开发在线教程,网页制作教程,服务器教程,网络编程,数据库教程等。