邮件订阅
5ucms教程,动态改变图片尺寸(一)
作者: 来源: 日期:2015/8/8 20:41:33 浏览量:43(滞后) 人气:LOADING...(实时) 【

5ucms教程,动态改变图片尺寸(一)∠人得鳎馐且桓隹玟榔鞯氖纠憧梢园阉糜贜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; positi 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则表示缩放不要动画。


选择5ucms.org 选择未来

本站推荐: 5ucms模板下载 5ucms插件下载 仿站联系Q3876307       [复制给好友] [打印] [关闭] [返回] [顶部]
上一篇:5ucms插件,JavaScript+PHP 应用一:网页制作中双下拉菜单的动态实现
下一篇:[Javascript]
本站声明:本网站所载文章等内容,目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权及其它问题,请在30日内与本网联系(Email:3876307#qq.com),我们将在第一时间删除内容。若原创内容转载请注明出处。
5ucms教程,动态改变图片尺寸(一)的关键词:
评论信息
相关分类
本周热门
本月热门
关于我们 - 版权/免责 申明 - 建站服务 - 网站地图 - 稿件投递 - 联系我们 - 5ucms
Copyright © 2008-2015 www.5ucms.org