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


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 相关文章推荐
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
jquery ready()的几种实现方法小结
Jun 18 Javascript
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
Javascript之String对象详解
Jun 08 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
深入理解vue $refs的基本用法
Jul 13 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 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中$this和$that指针使用实例
2015/01/06 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
PHP微信红包API接口
2015/12/05 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
详细分析JavaScript变量类型
2015/07/08 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
Python饼状图的绘制实例
2019/01/15 Python
python导入模块交叉引用的方法
2019/01/19 Python
Django获取应用下的所有models的例子
2019/08/30 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
毕业研究生的自我鉴定
2013/11/30 职场文书
yy司仪主持词
2014/03/22 职场文书
项目负责人岗位职责
2015/02/15 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis