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


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 StringBuilder类实现
Dec 22 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
javascript iframe跨域详解
Oct 26 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 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删除HTMl标签的实现代码
2013/06/30 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
JavaScript修改css样式style
2008/04/15 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
python网络爬虫采集联想词示例
2014/02/11 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
python assert的用处示例详解
2019/04/01 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
存储过程的优点有哪些
2012/09/27 面试题
学习十八大报告感言
2014/02/28 职场文书
总经理任命书
2014/03/29 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
敬老院标语
2014/06/27 职场文书
民间个人借款协议书
2014/09/30 职场文书
辞职书格式样本
2015/02/26 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
Python基础之元组与文件知识总结
2021/05/19 Python
为什么RedisCluster设计成16384个槽
2021/09/25 Redis