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


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 相关文章推荐
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
详解用node.js实现简单的反向代理
Jun 26 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
angular 服务随记小结
May 06 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
JS函数基本定义与用法示例
Jan 15 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
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
php下使用curl模拟用户登陆的代码
2010/09/10 PHP
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
Python性能优化技巧
2015/03/09 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
python基础练习之几个简单的游戏
2017/11/10 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
python3 mmh3安装及使用方法
2019/10/09 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
python求前n个阶乘的和实例
2020/04/02 Python
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
中青班党性分析材料
2014/02/16 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
银行求职信范文
2014/05/26 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
华山导游词
2015/02/03 职场文书
高中社区服务活动报告
2015/02/05 职场文书
简历中自我评价范文
2015/03/11 职场文书
七一晚会主持词
2015/06/29 职场文书
MySQL系列之十二 备份与恢复
2021/07/02 MySQL
java项目构建Gradle的使用教程
2022/03/24 Java/Android