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


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中通过URL传递汉字的方法
Apr 09 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
angular动态表单制作
Feb 23 Javascript
node使用request请求的方法
Dec 20 Javascript
js实现简单贪吃蛇游戏
May 15 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 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
JS 时间显示效果代码
2009/08/23 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
JS实现滑动插件
2020/01/15 Javascript
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
Python基于DES算法加密解密实例
2015/06/03 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
python如何统计序列中元素
2020/07/31 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
Python转换时间的图文方法
2019/07/01 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
2014客服代表实习自我鉴定
2014/09/18 职场文书
租房协议书范例
2014/10/14 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
会计主管岗位职责
2015/04/02 职场文书
预备党员半年考察意见
2015/06/01 职场文书