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


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继承的实现代码
Aug 05 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
Jquery带搜索框的下拉菜单
May 06 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
js自定义瀑布流布局插件
May 16 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
js实现3D旋转相册
Aug 02 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
jQuery实现多按钮单击变色
2014/11/27 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
详解python运行三种方式
2019/05/13 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
python识别验证码的思路及解决方案
2020/09/13 Python
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
前台接待的工作职责
2013/11/21 职场文书
行政总经理岗位职责
2013/12/05 职场文书
关于期中考试的反思
2014/02/02 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
写给医院的感谢信
2015/01/22 职场文书
英语通知范文
2015/04/22 职场文书
在职证明书模板
2015/06/15 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书