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


Posted in Javascript onJune 25, 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;">

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 相关文章推荐
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 Javascript
vue开发简单上传图片功能
Jun 30 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
如何取得中文输入的真实长度?
Jun 24 #Javascript
快速保存网页中所有图片的方法
Jun 23 #Javascript
网页常用特效代码整理
Jun 23 #Javascript
文本加密解密
Jun 23 #Javascript
解密效果
Jun 23 #Javascript
CheckBox 如何实现全选?
Jun 23 #Javascript
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 #Javascript
You might like
PHP 组件化编程技巧
2009/06/06 PHP
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
js实现网页收藏功能
2015/12/17 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
美术专业学生个人自我评价
2013/09/19 职场文书
物业管理个人自我评价
2013/11/08 职场文书
大学毕业生的自我鉴定
2013/11/30 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
银行催款通知书
2015/04/17 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android
简单聊聊Golang中defer预计算参数
2022/03/25 Golang