网页里控制图片大小的相关代码
更新时间：2006年06月13日 00:00:00 作者：
１、用鼠标拖动来改变大小
２、用鼠标滚动控制图片大小
３、图片标签里用代码控制大小
４、CSS控制图片大小
1. css2直接实现: img{max-width: 500px;} (IE暂不支持)
2. expression实现: img{width:expression(width>500?"500px":width);} (IE only)
3. 使用js. 方法: 用 document.getElementsByTagName("IMG") 的方法取得全部img元素 遍历img元素 判断其宽度并做相应操作
<SCRIPT LANGUAGE="JavaScript">
function resizeImage(evt,obj){
newX=evt.x
newY=evt.y
obj.width=newX
obj.height=newY
}
</script>
<img src="7say.gif" ondrag="resizeImage(event,this)">
function resizeImage(evt,obj){
newX=evt.x
newY=evt.y
obj.width=newX
obj.height=newY
}
</script>
<img src="7say.gif" ondrag="resizeImage(event,this)">
２、用鼠标滚动控制图片大小
<img src="7say.gif" onmouseenter="focus();" onmouseout="blur();" onmousewheel="width+=(window.event.wheelDelta==120)?-5:+5;">
３、图片标签里用代码控制大小
<img border="0" src="[!--picurl--]" onload="if(this.width>screen.width-500)this.style.width=screen.width-500;">
经测试这里需要修改一下，不然刷新网页时图片会显示原始大小。<img border="0" src="[!--picurl--]" onload="if(this.width>screen.width-500)this.resized=true;this.style.width=screen.width-500;">
４、CSS控制图片大小
1. css2直接实现: img{max-width: 500px;} (IE暂不支持)
2. expression实现: img{width:expression(width>500?"500px":width);} (IE only)
3. 使用js. 方法: 用 document.getElementsByTagName("IMG") 的方法取得全部img元素 遍历img元素 判断其宽度并做相应操作
相关文章
这篇文章主要为大家介绍了js面向对象编程OOP及函数式编程FP的区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了JavaScript高级程序设计之变量与作用域，文章主要通过描述原始值与引用值、instanceof、作用域展开具体内容,需要的朋友可以参考一下2021-11-11
这篇文章主要给大家分享的时JavaScript 对象创建的3种方法,在 JavaScript中，对象是一组有属性名和属性值组成的无序集合，对象的创建可以通过对象字面量、new 关键字 和Object.create()函数来创建。2021-11-11
这篇文章主要介绍了微信小程序中input标签详解及简单实例的相关资料,需要的朋友可以参考下2017-05-05
这篇文章主要为大家介绍了最近火爆全网的 Evil.js 源码解读，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了利用 JavaScript 构建命令行应用，下面文章围绕如何利用JavaScript 构建命令行应用的相关资料炸开详细内容,需要的朋友可以参考一下2021-11-11
accesskey 提交...2006-06-06
这篇文章主要介绍了微信小程序canvas写字板效果及实例的相关资料,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了微信小程序 navigation API实例详解的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要介绍了微信小程序 通过控制CSS实现view隐藏与显示的相关资料,需要的朋友可以参考下2017-05-05
最新评论