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


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 相关文章推荐
可输入的下拉框
Jun 19 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
vuex state中的数组变化监听实例
Nov 06 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
Vue router安装及使用方法解析
Dec 02 Vue.js
新闻内页-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 反射机制实现动态代理的代码
2008/10/22 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
Python的SQLAlchemy框架使用入门
2015/04/29 Python
详解在Python程序中使用Cookie的教程
2015/04/30 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
python判断正负数方式
2020/06/03 Python
深入浅析Python代码规范性检测
2020/07/31 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
大专生简历的自我评价
2013/11/26 职场文书
高中生职业规划范文
2014/03/09 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis