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


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 相关文章推荐
js option删除代码集合
Nov 12 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
jquery实现pager控件示例
Apr 09 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
原生js二级联动效果
Jun 20 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 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
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
php数组去重复数据示例
2014/02/25 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
javascript实现画板功能
2020/04/12 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
Python运算符重载用法实例分析
2015/06/01 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
jupyter notebook清除输出方式
2020/04/10 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
酒店管理自荐信
2013/10/23 职场文书
一年级学生期末评语
2014/04/21 职场文书
法人任命书范本
2014/06/04 职场文书
销售团队获奖感言
2014/08/14 职场文书
保安2014年终工作总结
2014/12/06 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python