两种自适应图片大小的布局方式比较

axl234

浏览: 260369 次
性别:
来自: 北京

最近访客更多访客>>

ShaLongBus

398466028

54931104

qq22903594

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

第一种：采用display:table-cell;的方式实现自适应布局特点是图片变大文字变窄，行数变多。文字靠上与图片对齐，文字与图片不等高

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/*基于display:table-cell的自适应布局*/
.cell {
display:table-cell;
*display:inline-block;
width:2000px;
*width:auto;
}
</style>
</head>
<body>
<div style="width:50%;">
        <img id="targetImage" src="mm1.jpg" width="128" class="l mr20" />
          <div class="cell"> 【魔都惊现~以物换物~交换商店】原来电影《第36个故事》中那个小店现实真的存在~在虹口足球场附近的这家店里，看中什么物件，只要拿出家中闲置的物品交换就行。用一个闲置的蜡烛台，换一个古筝演奏家登台时佩戴的耳环；用一台Lomo相机，换几张爱情主题的邮票…你想交换什么？
          </div>
</div>
<script>
var eleImage = document.getElementById("targetImage"),
widthInitImage = 0, isBeingLarge = true;

var funWidthImage = function() {
var widthImage = eleImage.width;
if (isBeingLarge) {
  widthImage += 2;
  if (widthImage > 256) {
   widthImage = 256;
   isBeingLarge = false;
  }
} else {
  widthImage -= 2;
  if (widthImage < widthInitImage) {
   widthImage = widthInitImage;
   isBeingLarge = true;
  }
}
eleImage.width = widthImage;

setTimeout(funWidthImage, 50);
};

if (eleImage) {
widthInitImage = eleImage.width;
funWidthImage();
}
</script>
</body>
</html>

第二种：采用图片左浮动，文字overflow:hidden;的方式实现自适应布局，图片放大文字宽度变小，高度和图片等高，上下都对齐

.demo {
width:500px;
margin:32px auto;
}
.demo img {
float:left
}
.cell {
overflow:hidden;
}
</style>
</head>
<body>
<div class="demo"> <img id="targetImage" src="mm1.jpg" width="128" class="l mr20" />
<p class="cell"> 【魔都惊现~以物换物~交换商店】原来电影《第36个故事》中那个小店现实真的存在~在虹口足球场附近的这家店里，看中什么物件，只要拿出家中闲置的物品交换就行。用一个闲置的蜡烛台，换一个古筝演奏家登台时佩戴的耳环；用一台Lomo相机，换几张爱情主题的邮票…你想交换什么？ </p>
</div>
<script>
var eleImage = document.getElementById("targetImage"),
widthInitImage = 0, isBeingLarge = true;

var funWidthImage = function() {
var widthImage = eleImage.width;
if (isBeingLarge) {
  widthImage += 2;
  if (widthImage > 256) {
   widthImage = 256;
   isBeingLarge = false;
  }
} else {
  widthImage -= 2;
  if (widthImage < widthInitImage) {
   widthImage = widthInitImage;
   isBeingLarge = true;
  }
}
eleImage.width = widthImage;

setTimeout(funWidthImage, 50);
};

if (eleImage) {
widthInitImage = eleImage.width;
funWidthImage();
}
</script>
</body>
</html>

分享到：

javascript实现简单的链式调用 | css实现图片根据鼠标滚轮滚动

2012-03-27 10:36
浏览 954
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论