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


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 相关文章推荐
Js基础学习资料
Nov 23 Javascript
javascript定义函数的方法
Dec 06 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 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操作xml代码
2010/06/17 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
设定php简写功能的方法
2019/11/28 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
js里的prototype使用示例
2010/11/19 Javascript
javascript数组去掉重复
2011/05/12 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
javascript的push使用指南
2014/12/05 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
复习Python中的字符串知识点
2015/04/14 Python
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
简单实现python爬虫功能
2015/12/31 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
python多进程使用函数封装实例
2020/05/02 Python
python开根号实例讲解
2020/08/30 Python
南京某软件公司的.net面试题
2015/11/30 面试题
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
高中课前三分钟演讲稿
2014/08/18 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
事业单位个人总结
2015/02/12 职场文书
工会经费申请报告
2015/05/15 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python
HTML+JS实现在线朗读器
2022/02/15 Javascript