网页里控制图片大小的相关代码
更新时间：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元素 判断其宽度并做相应操作
相关文章
JSON是什么？JSON是JS的一种简单数据格式,JSON是JavaScript原生格式，它是一种严格的js对象的格式，JSON的属性名必须有双引号，如果值是字符串，也必须是双引号2017-03-03
自行实现Promise.allSettled的Polyfill处理
这篇文章主要为大家介绍了自行实现Promise.allSettled 的 Polyfill处理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
构造函数就是初始化一个实例对象，对象的prototype属性是继承一个实例对象。本文给大家分享javascript构造函数详解，对js构造函数相关知识感兴趣的朋友一起学习吧2021-08-08
这篇文章主要为大家介绍了js的一些潜在规则示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了 微信小程序后台解密用户数据实例详解的相关资料,需要的朋友可以参考下2017-06-06
这篇文章主要为大家介绍了autojs绘画实现六边形示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家介绍了qiankun 找不到入口问题彻底解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
今天小编就为大家分享一篇关于动态内存分配导致影响Javascript性能的问题，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2018-12-12
这篇文章主要介绍了微信小程序滚动Tab实现左右可滑动切换的相关资料,这里提供实现实例帮助大家实现这样的功能，需要的朋友可以参考下2017-08-08
这篇文章主要介绍了微信小程序 action-sheet详解及实例代码的相关资料,需要的朋友可以参考下2016-11-11
最新评论