网页里控制图片大小的相关代码


Posted in Javascript onJune 13, 2006

1、用鼠标拖动来改变大小

<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)">

2、用鼠标滚动控制图片大小
<img src="7say.gif" onmouseenter="focus();" onmouseout="blur();" onmousewheel="width+=(window.event.wheelDelta==120)?-5:+5;">

3、图片标签里用代码控制大小
<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;">

4、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元素 判断其宽度并做相应操作
Javascript 相关文章推荐
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
jQuery手风琴的简单制作
May 12 jQuery
Node.js 的模块知识汇总
Aug 16 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 Javascript
新闻内页-JS分页
Jun 07 #Javascript
JS BASE64编码 window.atob(), window.btoa()
Mar 09 #Javascript
JS实现打开本地文件或文件夹
Mar 09 #Javascript
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 #Javascript
你可能不再需要JQUERY
Mar 09 #Javascript
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 #Javascript
JS 容错处理代码, 屏蔽错误信息
Mar 09 #Javascript
You might like
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
浅谈php://filter的妙用
2019/03/05 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
Express.JS使用详解
2014/07/17 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
python取代netcat过程分析
2018/02/10 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
如何用Django处理gzip数据流
2021/01/29 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
自我鉴定四大框架
2014/01/17 职场文书
计划生育标语
2014/06/23 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
销售内勤岗位职责
2015/02/10 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
2016年会开场白台词
2015/06/01 职场文书
结婚十年感言
2015/07/31 职场文书
暑假打工感想
2015/08/07 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python