繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 网页里控制图片大小的相关代码
- Javascript
- javascript 短路法代码精简
- JavaScript 字符串乘法
- JQUERY 浏览器判断实现函数
- 精通Javascript+jQuery 视频教程 在线观看
- 用Javascript数组处理多个字符串的连接问题
- javascript 数组排序函数
- IE下通过JS控制剪贴板的代码
- JS获取父节点方法
- IE 下的只读 innerHTML
- javascript 自定义常用方法
- javascript 自定义事件初探
- javascript arguments 传递给函数的隐含参数
- javascript 面向对象编程基础：封装
- javascript 面向对象编程基础：继承
- javascript 面向对象编程基础 多态
- 自己的js工具_Form 封装
- 自己的js工具 Cookie 封装
- 自己的js工具 Event封装
- 获取HTML DOM节点元素的方法的总结
- ext checkboxgroup 回填数据解决
Javascript 中的 网页里控制图片大小的相关代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 209 ::
收藏到网摘: n/a
１、用鼠标拖动来改变大小
<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元素 判断其宽度并做相应操作
评论 (0) All
