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


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 相关文章推荐
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
JS敏感词过滤代码
Dec 23 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
JS严格模式知识点总结
Feb 27 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
JS实现商品橱窗特效
Jan 09 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解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
Python中线程编程之threading模块的使用详解
2015/06/23 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
python Opencv将图片转为字符画
2021/02/19 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
教你打造完美的创业计划书
2014/01/06 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
地震慰问信
2015/02/14 职场文书
英文产品推荐信
2015/03/27 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
MySQL 数据类型详情
2021/11/11 MySQL