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


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中获取元素索引的函数
Sep 10 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 Javascript
JavaScript实现无限轮播效果
Nov 19 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
简单易用的计数器(数据库)
2006/10/09 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
vue监听input标签的value值方法
2018/08/27 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
Python for循环与getitem的关系详解
2020/01/02 Python
python中取绝对值简单方法总结
2020/07/24 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
html5唤起app的方法
2017/11/30 HTML / CSS
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
放飞蜻蜓反思
2014/02/05 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
买卖合同协议书范本
2014/10/18 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
instantclient客户端 连接oracle数据库
2022/04/26 Oracle