10760人阅读
首先讲下这个bug的出现的情况，页面中有&a href="javascript:void(0)" onclick="document.getElementById('current').src=
&images/001.jpg&;&&这么一个a标签，onclick中的JS代码就是改变id为current的img标签的src属性，以达到动态切换图片的效
果。可是不幸的是：IE是动态改变的图片的路径，但是图片却不显示出来，得右键&显示图片&才能看到改变后的图片，不知是什
么原因，但据说是&a href="javascript:void(0)"&或者&a href="#"&这样使用a标签的话并不能阻止a标签最后触发一个什么行为，
导致ie6会错误的认为页面刷新或者重定向了，并且中断了当前所有连接，这样新图片的加载就被aborted了（不知真假），不管原
因是真是假，下面就先说下解决方案吧
简单的解决方法： 1、&a href="javascript:void(0)" onclick="document.getElementById('current').src=&images/001.jpg&;&
&；就是在代码后面加上即可2、把A换成SPAN等
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：574241次
积分：9185
积分：9185
排名：第949名
原创：329篇
转载：62篇
评论：119条
(1)(1)(2)(2)(4)(4)(1)(1)(3)(2)(2)(1)(12)(4)(1)(5)(3)(4)(1)(1)(8)(5)(11)(7)(1)(3)(1)(3)(5)(3)(5)(1)(8)(13)(3)(5)(17)(4)(4)(15)(15)(17)(12)(18)(35)(6)(3)(17)(20)(25)(10)(22)(3)(4)(1)(1)(2)(4)WWW.VGOT.NET
My heart is like an open highway, Like franke said I did it my way.
科技创造力量，网络成就梦想。凝聚天下，开阔眼界
关于网页中调整图像大小的方法大家肯定都会，通常情况下，我们会在 &img/& 标签内使用 onload 在图像加载完成后调用指定的函数来调整大图像的大小，为什么要 onload 之后呢？因为必须等图像加载完成之后，JS才能正确的得到图像的宽高，从而等比缩放图像。那么问题是什么呢？其实由于一些特殊原因，我们无法保证能在指定区域里的每一个 &img/& 元素中都增加 onload，如果我们在统一的脚本中去获取那一块的 &img/& 元素，然后增加 onload& 事件是不靠谱的，因为 onload 事件必须在图像加载完成之前增加到元素上，如果元素已经加载完成后再去附件 onload 事件，那么这个事件是不会被触发的。如果我们能得知这个元素是否加载完成，那么就好办了，加载完成的话，直接调用指定的 JS 的函数来调整大小，没有加载完成，则赋于这个元素 onload&事件，把调整大小的函数放到 onload 中。怎么知道这个元素是否加载完成呢？对 complete 属性，比如我们有一个图像元素的 ID 是 "image" ，则可以使用 document.getElementById("image").complete 来得到这个元素是否加载完成。这是一个布尔值，TRUE 则代表加载完成。那么我们具体的实用演示见下：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cn" lang="cn"&
&meta http-equiv="Content-Language" content="zh-CN" /&
&meta http-equiv="Content-Type" content="text/ charset=gbk" /&
&title&关于 IMG 元素的 complete 属性演示，自动调整图像大小 - VGOT.NET&/title&
&p&这个演示主要是介绍 img 的 complete 属性，而不是如何调整图像大小，大家注意重心哈。&/p&
&p&几张图片也只是我从网上随便搜的演示，不一定随时都能打开。&/p&
&!-- 这里先放几张图 --&
&div id="content"&
&img src="/bbsfile/attachments/72_OZcuDZ3H9wqU.jpg" border="0" /&
&img src="//53_2.jpg" border="0" /&
&img src=".cn/photo/upload/.jpg" border="0" /&
&script type="text/javascript"&
//这下面的脚本建议就像这样放在网页底部
//不建议放在 window.onload 里，如果使用了 jQuery 则可以放在 $(document).ready(); 里
//或者参考这篇文章：http://www.vgot.net/?A65.htm
function adjustImageSize() {
//这里使用 this 指针来代替传参的当前元素，下面有解释
var imgMaxWidth = 350, imgMaxHeight = 300;
//图像限制的最大宽高
var w = this.offsetWidth, h = this.offsetH //获取元素的宽高
//通过计算等比调整图像宽高
if(imgMaxWidth & 0 && w & imgMaxWidth) {
this.width = imgMaxW
this.height = h/(w/imgMaxWidth);
} else if(imgMaxHeight & 0 && h & imgMaxHeight) {
this.height = imgMaxH
this.width = w/(h/imgMaxHeight);
var imgs = document.getElementById("content").getElementsByTagName("img");
for(var i=0; i&imgs. i++) {
if(imgs[i].complete) { //使用 complete 属性判断元素是否加载完成
//直接调用函数调整图像大小
//这里使用函数的 call() 方法将函数的 this 指针改为 imgs[i] 元素
adjustImageSize.call(imgs[i]);
//没有加载完成则将函数赋到元素的 onload 事件中
//onload 的内部 this 指针本身就是它所属的元素
imgs[i].onload = adjustImageS
点击这里下载示例文件：本文内容由 VGOT Design 原创，转载请保留原文链接：
文章点击排行
& Copyrights
皖ICP备-0700916号
Processed in 0.0717051 second(s), 4 Queries, Memory 747.41 KB.当前访客身份：游客 [
少年不识愁滋味，为赋新词强说愁。 而今识尽愁滋味，却道天凉好个秋。
：三年前的文章，令小弟也能一窺navigationView的強...
：继续研究python，这玩意太牛了。
：引用来自“双子座”的评论 引用来自“西昆仑”的...
：引用来自“forloveyou”的评论 我在搭建3.7环境时...
：免费提供App网页自动下载安装所需https服务器！微...
：引用来自“willingseal”的评论 引用来自“湛蓝的...
：引用来自“mhm426”的评论点击一行后，同时标记了...
：楼主干的漂亮~~
：When the window of contain GtkEntry type is p...
：frame怎么把图像放进去？
今日访问：254
昨日访问：352
本周访问：606
本月访问：2674
所有访问：428477
iOS开发26：UIImageView常用操作
发表于3年前( 22:56)&&
阅读（32277）&|&评论（）
0人收藏此文章,
UIImageView，顾名思义，是用来放置图片的。使用Interface Builder设计界面时，当然可以直接将控件拖进去并设置相关属性，这就不说了，这里讲的是用代码。
1、创建一个UIImageView：
创建一个UIImageView对象有五种方法：
UIImageView *imageView1 = [[UIImageView alloc] init];
UIImageView *imageView2 = [[UIImageView alloc] initWithFrame:(CGRect)];
UIImageView *imageView3 = [[UIImageView alloc] initWithImage:(UIImage *)];
UIImageView *imageView4 = [[UIImageView alloc] initWithImage:(UIImage *) highlightedImage:(UIImage *)];
UIImageView *imageView5 = [[UIImageView alloc] initWithCoder:(NSCoder *)];
比较常用的是前边三个。至于第四个，当这个ImageView的highlighted属性是YES时，显示的就是参数highlightedImage，一般情况下显示的是第一个参数UIImage。
2、frame与bounds属性：
上述创建一个UIImageView的方法中，第二个方法是在创建时就设定位置和大小。
当之后想改变位置时，可以重新设定frame属性：
imageView.frame = CGRectMake(CGFloat x, CGFloat y, CGFloat width, CGFloat heigth);
注意到UIImageView还有一个bounds属性
imageView.bounds = CGRectMake(CGFloat x, CGFloat y, CGFloat width, CGFloat heigth);
那么这个属性跟frame有什么区别呢？
我的理解是，frame设置其位置和大小，而bounds只能设置其大小，其参数中的x、y不起作用即便是之前没有设定frame属性，控件最终的位置也不是bounds所设定的参数。bounds实现的是将UIImageView控件以原来的中心为中心进行缩放。例如有如下代码：
imageView.frame = CGRectMake(0, 0, 320, 460);
imageView.bounds = CGRectMake(100, 100, 160, 230);
执行之后，这个imageView的位置和大小是（80， 115， 160， 230）。
3、contentMode属性：
这个属性是用来设置图片的显示方式，如居中、居右，是否缩放等，有以下几个常量可供设定：
UIViewContentModeScaleToFill
UIViewContentModeScaleAspectFit
UIViewContentModeScaleAspectFill
UIViewContentModeRedraw
UIViewContentModeCenter
UIViewContentModeTop
UIViewContentModeBottom
UIViewContentModeLeft
UIViewContentModeRight
UIViewContentModeTopLeft
UIViewContentModeTopRight
UIViewContentModeBottomLeft
UIViewContentModeBottomRight
注意以上几个常量，凡是没有带Scale的，当图片尺寸超过 ImageView尺寸时，只有部分显示在ImageView中。UIViewContentModeScaleToFill属性会导致图片变形。UIViewContentModeScaleAspectFit会保证图片比例不变，而且全部显示在ImageView中，这意味着ImageView会有部分空白。UIViewContentModeScaleAspectFill也会证图片比例不变，但是是填充整个ImageView的，可能只有部分图片显示出来。
前三个效果如下图：
& &UIViewContentModeScaleToFill & &UIViewContentModeScaleAspectFit &UIViewContentModeScaleAspectFill
4、更改位置
更改一个UIImageView的位置，可以
4.1 直接修改其frame属性
4.2 修改其center属性：
imageView.center = CGPointMake(CGFloat x, CGFloat y);
center属性指的就是这个ImageView的中间点。
4.3 使用transform属性
imageView.transform = CGAffineTransformMakeTranslation(CGFloat dx, CGFloat dy);
其中dx与dy表示想要往x或者y方向移动多少，而不是移动到多少。
5、旋转图像
imageView.transform = CGAffineTransformMakeRotation(CGFloat angle);
要注意它是按照顺时针方向旋转的，而且旋转中心是原始ImageView的中心，也就是center属性表示的位置。
这个方法的参数angle的单位是弧度，而不是我们最常用的度数，所以可以写一个宏定义：
#define degreesToRadians(x) (M_PI*(x)/180.0)
用于将度数转化成弧度。下图是旋转45度的情况：
6、缩放图像
还是使用transform属性：
imageView.transform = CGAffineTransformMakeScale(CGFloat scale_w, CGFloat scale_h);
其中，CGFloat scale_w与CGFloat scale_h分别表示将原来的宽度和高度缩放到多少倍，下图是缩放到原来的0.6倍的示意图：
7、播放一系列图片
imageView.animationImages = imagesA
// 设定所有的图片在多少秒内播放完毕
imageView.animationDuration = [imagesArray count];
// 不重复播放多少遍，0表示无数遍
imageView.animationRepeatCount = 0;
// 开始播放
[imageView startAnimating];
其中，imagesArray是一些列图片的数组。如下图：
8、为图片添加单击事件：
imageView.userInteractionEnabled = YES;
UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapImageView:)];
[imageView addGestureRecognizer:singleTap];
一定要先将userInteractionEnabled置为YES，这样才能响应单击事件。
9、其他设置
imageView.hidden = YES或者NO;&&&&// 隐藏或者显示图片
imageView.alpha = (CGFloat)&&&&// 设置透明度
imageView.highlightedImage = (UIImage *)hightlightedI
// 设置高亮时显示的图片
imageView.image = (UIImage *) // 设置正常显示的图片
[imageView sizeToFit];&&&&// 将图片尺寸调整为与内容图片相同
更多开发者职位上
1)">1)">1" ng-class="{current:{{currentPage==page}}}" ng-repeat="page in pages"><li class='page' ng-if="(endIndex<li class='page next' ng-if="(currentPage
相关文章阅读欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> Html中img图片标签结构-img语法教程篇
img标签目录
一、语法与结构：
&src=&图片路径&&width=&175&&height=&47&&alt=&&&&
Src 跟图片路径（扩展：;）
Width 设置图片宽度（扩展：html 宽度;）
Height 设置图片高度（扩展：html高度，）
Alt 设置对这张图片文字描述，通常设置描述是为了搜索引擎能读懂你这张图片表达内容（有利于搜索引擎优化因素而使用）
二、Img标签使用说明：
Img标签在中是引入外部图片到网页中显示的。
三、Img图片标签代码案例：
在HTML中body区内添加内容如下：
&img src=&/css-images/css-logo.gif& width=&175& height=&47& alt=&DIVCSS5的LOGO& /&
四、效果示例图：
说明：我们使用img标签在html中引入外部的图片
五、Html img图片标签结构说明图
&img&标签元素结构分析图
六、DIVCSS5对img标签总结：
1、Img标签非常常用，作用就是引入外部图片到html中显示出引入图片内容。
2、使用时候注意结构，图片路径正确，宽度、高度根据实际需要而设置。
3、通常我们会使用CSS样式对图片的width、height、边框进行设置，我们在其他地方也有针对标签样式设置教程介绍。如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; ()&#8226; &#8226; ()&#8226; ()&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226;
必备HTML基础教程 Essential HTML Tutorials
&最新文章NEWS&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; 相关文章RELATED&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; CSS EFFECTS / CSS MODULE如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 16:15
原创：本文 DIVCSS5版权所有。
学习与资源分享平台