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


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 相关文章推荐
javascript事件模型代码
Jul 01 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
node.js如何自定义实现一个EventEmitter
Jul 16 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源代码数组统计count分析
2011/08/02 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Python解决鸡兔同笼问题的方法
2014/12/20 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
python实现外卖信息管理系统
2018/01/11 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
超实用的 30 段 Python 案例
2019/10/10 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
业务部经理岗位职责
2014/01/04 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
购房协议书范本
2014/04/11 职场文书
跳蚤市场口号
2014/06/13 职场文书
室内趣味活动方案
2014/08/24 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
践行三严三实心得体会
2014/10/13 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
思想政治表现评语
2015/01/04 职场文书
2019各种保证书范文
2019/06/24 职场文书
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers