JS+css 图片自动缩放自适应大小

我加了css的限制:

复制代码 代码如下:

div img {}{
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}

◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
 ◎ width:600px; 在所有浏览器中图片的大小为600px;
 ◎ 当图片大小大于600px,自动缩小为600px。在IE6中有效。
 ◎ overflow:hidden; 超出的部分隐藏,避免控制图片大小失败而引起的撑开变形。
在放图片的页面里加了
复制代码 代码如下:

<script language="JavaScript">
var imgObj;
for( i = 0; i < document . getElementsByTagName("img") . length; i++ )
{
 imgObj = document . getElementsByTagName("img")[i];
 //建议只判断高度或者宽度其中一个,那样可以自动按比例缩放
 if ( imgObj . width > 500 ) //判断图片的宽度,如果大于700,则设置为700,值可以自己修改
 {
  imgObj . width = 500
 }
 if ( imgObj . height > 700 ) //判断图片的高度,如果大于700,则设置为700,值可以自己修改
 {
  imgObj . height = 700
 }
}
</script>

单独的图片控制,用这个:
复制代码 代码如下:

<script>
var abc=document.getElementById("abc");
var imgs=abc.getElementsByTagName("img");
for (var i=0,g;g=imgs[i];i++)
g.onload=function(){if (this.width>300){this.width=300}else{if (this.height>300)this.height=300}}
</script>

测试在IE和FF下通过。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
最近项目网页需要实时显示服务器时间,如果每秒通过ajax加载服务器时间的话,就会产生大量的请求。 于是设计了“javscript自运行时钟” 和 "ajax加载服务器时间" 相结合的形式来显示服务器时间。“javscript自运行时钟” 以某初始时间为起点自动运行,"ajax加载服务器时间" 每60s将服务器的时间给“javscript自运行时钟” 更新。 javscript自运行时钟: 复制代码 代码如下: /*! * File: sc_clock.js * Version: 1.0.0 * Author
弄了个很简单的例子判断IE浏览器版本是否过低 例子结构如下,其实一个页面加引入jquery就可以了,顺便弄了个标准结构(注意在IE6和IE7版本较低情况下下才看到它的提示效果) 复制代码 代码如下: !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/x

jQuery filter函数使用方法 - 2015-05-01 14:05:07

利用filter函数可以从wrapper set中过滤符合条件的DOM元素。 如果我们有一个内容如下的html文件,要获取类为external的a元素,使用filter可以很easy地搞定。 复制代码 代码如下: a href=#>a href=#>a href=#>a href=#>a href=#>a href=#>a href=#>a href=#>a href=#>a href=#> filter的参数类型可分为两种: 1 传递选择器 2 传递过滤函数 如果使用选择器作为参数,用法如下 复制代码 代
JavaScript中的所有事物都是对象:字符串、数组、数值、函数等。JS中并没有类的概念, 但我们可以利用JS的语法特征,以类的思想来创建对象。 原始方法 复制代码 代码如下: script type="text/javascript" var obj = new Object(); obj.name = "Koji"; //为对象添加属性 obj.age = 21; obj.showName = function(){ //为对象添加方法 alert(this.name); } obj.showAge
几个月前在一个项目中涉及到树形栏,然后看了很多插件,觉得有点麻烦,于是自己写了一个,写着写着就出问题了。 当时项目是通过树形栏进行权限控制的,管理员可以对从数据库去的数据动态生成树形栏进行增删改查操作,可是用$(".XX").click();方法是不行的。 1、之前用的是jq1.4.3 ,jq1.7一下都可以使用live()方法,来实现该功能 $(‘#div').live(‘click',function(){//do stuff}); 但是live方法也有不支持的事件,例如:toggle事件 ,遇到这个
今天又回顾了一下这个插件,然后发现它在IE6下面工作的时候,显示起来是不正常的,tip经常出现在很离谱的位置。问题还有,由于tip的显示效果没有用到任何图像,都是纯的CSS,所以里面用CSS实现的三角形在IE6下是无法工作的,会显示一块有色区域,很丑,所以我就想动手改它一下。先上一张对比图好了: js方面的代码肯定是没问题的,问题出CSS上,Colortip用的是position进行定位,在IE6下面可能存在着一点问题。而且由于IE6不支持border-color:transparent的属性,所以tip下
原文作者: Andy Croxall 原文链接: Ten Oddities And Secrets About JavaScript 翻译编辑: 张鑫旭 数据类型和定义 1. Null是个对象 JavaScript众多类型中有个Null类型,它有个唯一的值null, 即它的字面量,定义为完全没有任何意义的值。其表现得像个对象,如下检测代码: 复制代码 代码如下: alert(typeof null); //弹出 'object' 如下截图: 尽管typeof值显示是"object",但null并不认为是一
一个合作伙伴的页面效果,鼠标放到 图片上要变成彩色,本来就是一个简单的换色效果,但问题是,图片的高度和宽度不是一样大的。 这就比较麻烦了。如果把图片放到背景里就要一个一个的去定义图片外面的容器a/a,要多写很多层叠样式,太麻烦,最后我决定,把图片的高度的一一半,和图片的宽度赋值给它外面的容器a/a 然后把图片做了如下处理: 当鼠标移动到图片上让他向上移动30个像素,移开则回到原位。 html代码如下: 复制代码 代码如下: !--partner_box-- div class="partner_box"
方法说明: 结束响应,告诉客户端所有消息已经发送。当所有要返回的内容发送完毕时,该函数必须被调用一次。 如何不调用该函数,客户端将永远处于等待状态。 语法: 复制代码 代码如下: response.end([data], [encoding]) 接收参数: data end()执行完毕后要输出的字符,如果指定了 data 的值,那就意味着在执行完 response.end() 之后,会接着执行一条 response.write(data , encoding); encoding 对应data的字符编码
我们大多数人都使用过JavaScript,近年来随着各种JavaScript框架的流行使得JavaScript变得更加神奇和容易。"Anonymous (匿名)函数?不知道那是什么但是看起来和自己所写的差不多。” 你可能并不知道可以传给 new Function() 一个字符串作为函数的body来构造一个 JavaScript函数。编程中并不经常用到,但有时候应该是很有用的. 下面是 new Function 的基本用法: 复制代码 代码如下: // 最后一个参数是函数的 body(函数体),类型为 st