等待-放飞梦想 » expression http://leotheme.cn 勤现在-乐将来 Tue, 07 Feb 2012 07:06:17 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 按比例缩小图片方法总结 http://leotheme.cn/javascript/reimgsize-zongjie.html http://leotheme.cn/javascript/reimgsize-zongjie.html#comments Wed, 19 Nov 2008 03:49:26 +0000 Await http://leotheme.cn/?p=178 您可能也喜欢：
CSS常用缩写语法总结
网页中嵌入Flash的方法总结
批量更改图片尺寸的ps脚本
CSS图片垂直居中方法整理
功能强大的FLASH Galleryd——dfGallery 2.0 无觅 ]]> 其实早些时候就想写一下这个东东，因为想换下主题用用，但发现日志里的图片却因为太大而把POST撑开了，变得很难看。我想遇到这个问题的人一定不少吧。之前一直太忙，没时间去整它，今天抽点时间写一下怎样解决图片撑开的问题，方法很多的、接下来一一给大家道来…

方法一：Max-width|Max-height
这是最简单的方法了，给图片一个最大的宽度和高度:

#Imgbox img {
                   max-width: 500px;
                   max-height: 300px;
                   border:0;
                 }

但它的效果并不怎么好，因为目前的IE6并不认识这个max-width和max-height。而且有时候图片的宽高相差很大。这样做后图片会变形。

方法二：Max-width/height+Expression
先来了解下什么是CSS expression：

IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript脚本关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

了解了之后就简单了，其实就是把JS写到了CSS中，方便应用。我们来看下CSS怎么写:

#Imgbox img {
                   max-width: 500px;
                   width:expression(document.body.clientWidth > 500?"500px":"auto" );
                   display:block;
                   border:0;
                 }

这样做虽然实现了等比例缩放，但它还是有它的缺点：会影响浏览器的速度，因为Expression是很占资源的一个东东，所以，一般不是没办法了不建议用CSS的Expression。难道没有好的解决方法了？不，当然有，接着往下看。

方法三：JavaScript实现
应该是这是现在最好的解决方法了，我们看下代码：

function ReImgSize(){
var await = document.getElementById("Imgbox"); //定义要改变的图片的容器ID
var imgall = await.getElementsByTagName("img");//取得容器内所有的IMG标签
  for (i=0;i<imgall.length;i++)
   {
    if (imgall[i].width>500) //如果图片的宽度大于500
     {
    var oWidth=imgall[i].width; //取得图片的实际宽度
    var oHeight=imgall[i].height; //取得图片的实际高度
    imgall[i].width="500"; 重设图片的宽度为500
    imgall[i].height=oHeight*500/oWidth; //重设图片的高度
       }
    }
}

用法：把上面代码放到Head区，然后在Body标签中加入onload=”ReImgSize”;

最后给大家介绍一个jQuery的插件，用来改变图片的大小，而且还能实现图片的预加载。这个插件很小不到2KB。

它有4个参数：
scaling 是否等比例自动缩放
width 图片最大高
height 图片最大宽
loadpic 加载中的图片路径

实际应用中我们先把JS加载进来然后用一句代码就能实现了

$("img").LoadImage(true,500,200,"loading.gif");

效果不错的。喜欢试下的可以在下面的链接下载DEMO。

您可能也喜欢：

CSS常用缩写语法总结
网页中嵌入Flash的方法总结
批量更改图片尺寸的ps脚本
CSS图片垂直居中方法整理
搜狗拼音输入法漂亮皮肤 LeftSide
无觅

相关文章

  • 2008-09-09 -- 为什么尽量不要使用CSS Expression (0)
    CSS Expression也称为CSS表达式，它是动态设置CSS属性的强大方法，但也存在着一定的危险性。 在CSS Expression中使用JavaScript表达式。CSS属性根据Java...
  • 2011-09-24 -- 使用lesscss来编码编写css (10)
    lesscss 是动态的样式表语言，他让css增加变量，组合，函数，运算等语法。这个项目的网站在国内访问不到，大家都懂的。 lesscss使用方法有两种： 页面添加一个 less.js的文...
  • 2009-11-11 -- 左右两栏等高实现方法 (6)
    等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简...
  • 2009-08-30 -- CSS 3.0 参考手册 (中文版) (9)
    作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
  • 2009-07-07 -- 如何使你的CSS样式更易阅读? (15)
    在做wordpress主题的时候，样式是最重要的一部分。作为主题的制作者，我们不但要考滤页面的还原完整度，还要一个重要的就是要让CSS阅读起来很容易。因为不管我们怎么尽力去做到完美，但每个人都想主题更...
]]> http://leotheme.cn/javascript/reimgsize-zongjie.html/feed 5 为什么尽量不要使用CSS Expression http://leotheme.cn/javascript/donotcssexpression.html http://leotheme.cn/javascript/donotcssexpression.html#comments Tue, 09 Sep 2008 12:36:50 +0000 Await http://leotheme.cn/?p=63 您可能也喜欢：
使用lesscss来编码编写css
CSS 3.0 参考手册 (中文版)
关于CSS的书写习惯
如何使你的CSS样式更易阅读?
CSS中关于背景图的应用技巧 无觅 ]]> CSS Expression也称为CSS表达式，它是动态设置CSS属性的强大方法，但也存在着一定的危险性。

在CSS Expression中使用JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。

CSS Expression在其它浏览器中不起作用，因此在跨浏览器的编码中单独针对IE设置时会比较有用。

从IE5开始支持CSS Expression。我们看下面的代码：

background-color: expression( (new Date()).getHours()%2 ? "#F00" : "#00F" );

上面的代码是使用CSS Expression，实现隔一个小时切换一次背景颜色。

CSS Expression的问题就在于它的计算频率要比想象的多出很多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS Expression增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

一个减少CSS Expression计算次数的方法就是使用一次性的表达式，它在第一次运行时将结果赋给指定的样式属性，并用这个属性来代替CSS Expression。

如果样式属性必须在页面周期内动态地改变，使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS Expression，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。不要让您的用户感觉打开你的页面，机器会变的很慢。

您可能也喜欢：

使用lesscss来编码编写css
CSS 3.0 参考手册 (中文版)
关于CSS的书写习惯
如何使你的CSS样式更易阅读?
CSS中关于背景图的应用技巧
无觅

相关文章

  • 2008-11-19 -- 按比例缩小图片方法总结 (5)
    其实早些时候就想写一下这个东东，因为想换下主题用用，但发现日志里的图片却因为太大而把POST撑开了，变得很难看。我想遇到这个问题的人一定不少吧。之前一直太忙，没时间去整它，今天抽点时间写一下怎样解决图...
  • 2011-09-24 -- 使用lesscss来编码编写css (10)
    lesscss 是动态的样式表语言，他让css增加变量，组合，函数，运算等语法。这个项目的网站在国内访问不到，大家都懂的。 lesscss使用方法有两种： 页面添加一个 less.js的文...
  • 2009-11-11 -- 左右两栏等高实现方法 (6)
    等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简...
  • 2009-08-30 -- CSS 3.0 参考手册 (中文版) (9)
    作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
  • 2009-07-07 -- 如何使你的CSS样式更易阅读? (15)
    在做wordpress主题的时候，样式是最重要的一部分。作为主题的制作者，我们不但要考滤页面的还原完整度，还要一个重要的就是要让CSS阅读起来很容易。因为不管我们怎么尽力去做到完美，但每个人都想主题更...
]]> http://leotheme.cn/javascript/donotcssexpression.html/feed 0