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


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调用XML制作连动下拉列表框
Jun 25 Javascript
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
javascript运行机制之执行顺序理解
Aug 03 Javascript
Vue自定义多选组件使用详解
Sep 08 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
PHP 木马攻击防御技巧
2009/06/13 PHP
ajax php 实现写入数据库
2009/09/02 PHP
php实现jQuery扩展函数
2009/10/30 PHP
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
php导出CSV抽象类实例
2014/09/24 PHP
php创建多级目录的方法
2015/03/24 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
简单谈谈python中的lambda表达式
2018/01/19 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
python自动下载图片的方法示例
2020/03/25 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
2016暑期师德培训心得体会
2016/01/09 职场文书
Python连续赋值需要注意的一些问题
2021/06/03 Python